Vue项目中加载图片的坑

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')},...]	
		}
	}
}

此时就可以正常显示了。