vue-cli3 :src动态绑定图片地址报错404
我的写法如下:<img :scr="imgUrl">...data(){return {imgUrl: '@/assets/images/office1.jpg'//报错 404}}原因: 在webpack中会将assets下的图片当做模块来用,因为是动态加载的,所以url-loader将无法解析图片地址,然后npm run dev 或者npm run build之后导致路径没有被加工
·
src在静态绑定图片地址时不会出错,而动态绑定图片地址报错404.
我的写法如下:
<img :scr="imgUrl">
...
data(){
return {
imgUrl: '@/assets/images/office1.jpg' //报错 404
}
}
原因:
- 静态资源会直接被webpack copy到对应的静态资源文件夹下。而动态资源会被webpack当成模块打包,路径错乱,所以报错404。
- assets目录中的文件会被webpack处理解析成模块依赖,只支持相对路径形式
解决办法
1. 将图片作为模块加载进去
<img :scr="imgUrl">
...
data(){
return {
imgUrl: require('@/assets/images/office1.jpg') //成功 不报错
}
}
2. 将图片放在public文件夹里
- public目录不会被webpack处理,它们会直接被复制到最终的打包目录(默认是(dist/static)下。请注意vue.config.js中的publicPath。
<img :scr=`${{publiPath}}${{imgUrl}}`>
...
data(){
return {
//默认情况下publicPath是‘/’ 这里可以省略不写,如不是,则加上下面这句
publicPath: process.env.BASE_URL,
imgUrl: '/image/office1.jpg' //成功 不报错
//注意 image是public下的一个子文件
//这里千万不要写成 'public/image/office1.jpg' 会报错!
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)