Vue项目中加载图片时,遇到的坑
1.当直接在标签中,使用图片路径,此时可以正常显示。
<img src='img_src' />
正常显示
2.当img标签的src属性为变量时,且该变量的值是来自vue实例的data属性中,则此时会出现,图片无法显示的问题。如下代码
<img v-for='(item,index) in imgArr' :key='index' :src='item.src' />
export default {
data(){
return {
imgArr:[{src:'xxxx'},{src:'xxx'},...]
}
}
}
解决办法:
只需要在图片路径利用require加载就可以了。代码如下:
export default {
data(){
return {
imgArr:[{src:require('xxxx')},{src:require('xxx')},...]
}
}
}
此时就可以正常显示了。