VUE脚手架引入静态资源图片出问题解决方案

我在做有关vue脚手架的项目的时候发现，静态资源图片导入的时候总是出现问题。
发现自己的图片导入总是不显示。
这是我的解决方案：

1.直接写图片路径的时候

发现在vue脚手架中实现不了直接插入图片，图片在浏览器中不显示。
这里建议使用require()函数。
如图所示：

2.用json引入图片路径

用上面的方法发现无法用在v-for环境中，因为require是不能用变量显示，这里我们用字符串拼接的方法使用，在v-for环境中使用以下方法：
这是在html的代码

这是在js中的代码

这里我用了函数，是为了一个页面少写点代码。也可以直接使用字符串拼接，比如:

<img :src="require('../../static/'+item.picture+'.png')" class="recommendPic" />

这种形式也是可以解决图片不显示的问题。

3.也可以直接在data里面引入图片

例如在js中写：

data(){
	return{
		imgUrl:require('../../static/搜索-音乐.png')
	}
}

在html中写:

<img :src="imgUrl" class="recommendPic" />

以上就是我总结的三种解决vue脚手架图片不显示的方法。