当前位置：首页 > news >正文

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

news 来源：原创 2025/6/18 23:14:53

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

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会处理它。但如果是动态绑定或某些特定情况下，可能需要不同的处理方式。

图片路径

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

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

vue.config.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' ? './' : '/' // 路径适配
      }));
  },
};