vue+webpack动态设置图片src导致404错误

初学vue+webpack,要实现一个展示图片的模态框。

// 父组件






一直报404的错误,应该是webpack没有找到图片。但是直接在子组件中引用,则不报错

modal-image

js动态生成的路径无法被url-loader解析到,如果你去build,会发现图片甚至不会打包输出到dist目录(webpack是按需打包的)。

解决方案一

如果你是vue-cli初始化的项目,解决的办法:
第一步,把图片放到src同级的static目录(build/build.js文件中有一段代码是把static目录拷贝到dist/static的),比如图片放在static//images/production/illustration.jpg
第二步,js中使用/static//images/production/illustration.jpg去引用就行了。

解决方案二

通过require的方式将图片引入

// 父组件
imgUrl : require('../../assets/images/production/illustration.jpg')

你可能感兴趣的:(vue+webpack动态设置图片src导致404错误)