淘宝客网站主题模版,网站开发整合套件,模板网站和定,外贸网络营销的方法Vue项目动态加载图片 1. 错误的写法2. 正确的实践写法方法 1方法2 1. 错误的写法
以下情况运行异常#xff0c;图片加载不出来
img classimg :srcimgSrc /
script
let imgSrc ../../assets/img1.png;
/script2. 正确的实践… Vue项目动态加载图片 1. 错误的写法2. 正确的实践写法方法 1方法2 1. 错误的写法
以下情况运行异常图片加载不出来
img classimg :srcimgSrc /
script
let imgSrc ../../assets/img1.png;
/script2. 正确的实践写法
方法 1
这时候需要换个写法让编译时把图片加上去一起处理 原因编译时webpack会将图片当成模块加载使用。然而上面第 1 点是动态的loader无法解析图片路径所以编译规则处理不了所以加载时会找不到图片。 img classimg :srcimgSrc /script
import img1 from ../../assets/img1.png
let imgSrc img1;
/script方法2
把图片资源放到静态目录下static引用的时候就直接是固定地址进行引用 assets 和 static 的区别 assets在项目编译的过程会被webpack处理解析为模块依赖只支持相对路径的形式。 static在static这个目录下文件不会被webpack处理和解析webpack直接复制到最终的打包目录dist/static。必须使用绝对路径引用这些文件。 img src/static/img1.png /
