Vue项目build后图片加载不出来怎么办

小编给大家分享一下Vue项目build后图片加载不出来怎么办，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

Vue项目build图片加载不出来

vue项目，build之后会对图片进行处理，具体处理的方式是在文件webpack.base.conf.js中，有如下代码：

module: {    rules: [     {        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,        loader: 'url-loader',        options: {          limit: 10000, // 1k-----限制文件的大小          name: utils.assetsPath('img/[name].[hash:7].[ext]')        }     }    ]}

以上代码中，使用url-loader对图片的大小进行限制，在limit之内，WEBpack会将图片转化为base64，超出limit限制，交给file-loader处理。

如果在limit范围之内，不会出现图片加载不出来的情况；

超出limit，webpack会将处理后的图片放在dist/static/img/中，此时加载图片将会显示不出来。具体做法如下：

1.在config/index.js文件内

修改代码： (列出index.js的部分代码)

build: {    // Template for index.html    index: path.resolve(__dirname, '../dist/index.html'),     // Paths    assetsRoot: path.resolve(__dirname, '../dist'),    assetsSubDirectory: 'static',    assetsPublicPath: './', }

assetsPublicPath字段值由之前的'/'改为'./'；

2.在webpack.prod.conf.js文件内

output字段，添加代码(publicPath: './')：

output: {    publicPath: './', // 添加的代码    path: config.build.assetsRoot,    filename: utils.assetsPath('js/[name].[chunkhash].js'),    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')  },

3.在utils.js文件里添加 publicPath:'../../'

代码如下：

// (which is the case during production build)if (options.extract) {  return ExtractTextPlugin.extract({    use: loaders,    fallback: 'vue-style-loader',    publicPath: '../../'  // 添加的代码  })} else {  return ['vue-style-loader'].concat(loaders)}

以上步骤操作完后，执行命令:npm run build

在build后，dist中的index.html页面的link、script标签的引入路径变为相对路径；同时，相关的图片路径，也变变为相对路径，此时部署项目，不再出现图片路径404。

Vue项目打包后部分图片不显示

图片的后缀名不能含ad字母敏感词（即谷歌会认为是广告，并自动删除）

图片本身（质量）的原因，跟前端无关，需让UI给新的设计图片。--备注：QQ直接截图到本地的图片打包后可能也不显示，需跟UI要原始设计图。

以上是“Vue项目build后图片加载不出来怎么办”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！