Vue2项目打包后，某些图片被转换为base64导致无法显示

提示：以下是本篇文章正文内容，下面案例可供参考

Vue2项目打包后，某些图片被转换为base64导致无法显示

1.`为什么有些图片会被转成base64，而其他的却正常输出到dist/img目录下？`

因为Vue CLI默认可能会对小于某个阈值的图片进行base64内联，以减小HTTP请求的数量。

2.`解决办法`

1.需要检查Vue项目的配置文件----vue.config.js。如果没有这个文件，需要自己创建一个。

2.Vue CLI内部使用的是Webpack，所以需要找到处理图片的loader，比如url-loader或者file-loader。默认情况下，url-loader会在文件大小小于一定值时将文件转换为base64，超过这个值则使用file-loader来复制文件。因此，如果问题是由于图片大小刚好在这个阈值以下导致的，那么增大这个阈值或者完全禁用base64转换可能解决问题。

3.`解决步骤`

在项目根目录下创建或修改vue.config.js文件。
配置chainWebpack或configureWebpack来修改Webpack的图片处理规则。
调整url-loader的limit选项，增大其限制值，或者设置为false，这样所有图片都使用file-loader处理，不会被转成base64。
确保file-loader的相关配置正确，比如输出的路径和文件名。

另外，需要确认图片引用的方式是否正确。在Vue组件中，如果是通过相对路径引用图片，比如src: './assets/image.png'，Webpack会处理它。但如果是动态绑定或某些特定情况下，可能需要不同的处理方式。

图片路径

js 复制代码

<!-- 静态路径 -->
<img src="@/assets/image.png" />

<!-- 动态绑定时使用require -->
<img :src="require('@/assets/' + imageName)" />

vue.config.js文件

js 复制代码

module.exports = {
  publicPath: "./",
  chainWebpack: (config) => { // 新增图片处理规则
    config.module
      .rule('images')
      .use('url-loader')
      .tap(options => ({
        ...options,
        limit: 10240, // 10KB以上图片不转base64
        name: 'img/[name].[hash:8].[ext]', // 图片输出到dist/img目录
        esModule: false, // 避免vue2兼容问题
        publicPath: process.env.NODE_ENV === 'production' ? './' : '/' // 路径适配
      }));
  },
};

注意：

若想完全禁用base64，将limit: 0
如果图片仍不显示，检查：
- 开发环境是否配置了publicPath: '/'
- 图片是否真的超过设置的limit大小
- 控制台是否有404错误（路径问题）

总结

通过调整url-loader的limit阈值，可控制图片是否转为Base64。增大或禁用该值后，所有符合条件的图片将作为独立文件输出到dist/img目录，确保正确显示。

Vue2项目打包后，某些图片被转换为base64导致无法显示