图片

当我们需要在页面上插入图片

1. 标签

<img style="width: 40px;" :src="../../../public/img/logo2.png"/>

2. 在 public/img路径下放入图片

就可以注意到发送了相应请求

优化

我们可以使用图片压缩、优化和缓存策略来提高性能。

spirit

如果同一页面上有多张图片，可以采用spirit雪碧图的方式减少请求数量 spirit的配置方式如下：

npm install webpack-spritesmith --save-dev

const path = require('path');
const SpritesmithPlugin = require('webpack-spritesmith');

module.exports = {
  // ...其他配置
  plugins: [
    // ...其他插件
    new SpritesmithPlugin({
      src: {
        cwd: path.resolve(__dirname, 'public/img'), // 图片所在文件夹的绝对路径
        glob: '*.png' // 匹配规则
      },
      target: {
        image: path.resolve(__dirname, 'dist/sprite.png'), // 生成的雪碧图存放路径
        css: path.resolve(__dirname, 'dist/sprite.css') // 生成的样式文件存放路径
      },
      apiOptions: {
        cssImageRef: "sprite.png" // css文件中引用雪碧图的路径
      }
    })
  ]
};

这个配置会将public/img文件夹下所有的.png图片合并成一张名为sprite.png的雪碧图，并生成一个sprite.css样式文件，你可以在项目中直接使用这个样式文件来引用雪碧图中的图标。