【转】vue工程中图片无法显示

使用vue-cli后做项目，将图片路径放到了src/assets文件夹下，然后打包到线上时发现图片找不到了

解决方式：

1.将图片放到static文件夹下

2.修改config/index.js中，build对象下的assetsPublicPath为‘/’，原来的是'./'

3.修改图片路径：写成绝对路径(例如：'/static/1.png')

 

---------转自网络------------

原因：

图片在assets文件夹中的情况：在项目编译的过程中会被webpack处理解析为模块依赖 webpack中会将其中图片当做模块来用，加载图片模块好像就是得通过webpack的url-loader加载器来实现，然后url-loader好像是解析不了动态绑定的src的导致最终显示的地址是未处理的地址（也就是我说的地址还是一个相对地址） 因此动态绑定src时要通过加载模块的方式去加载这个图片 使用require(“ ”)

图片在static文件夹中的情况：在这个目录下文件不会被webpack处理,简单就是说存放第三方文件的地方，不会被webpack解析。他会直接被复制到最终的打包目录(默认是dist/static)下。 将图片放到static目录下，当做第三方文件加载不让webpack去处理他，引用的时候写成绝对路径 因此动态绑定src时直接写static目录下的绝对路径