<!-- 代码01 -->
<div>
<li v-for="(item,index) in data">
<img :src="require('@/'+ item.imgpath)" />
</li>
</div>
data为获取的json数据,是数据的集合(数组),即类似这样[{...},{...},...,{...}],imgpath是json里面本地图片的路径数据,像代码01这样写,img标签是写在一个v-for里面的,控制台是不会报任何错误的;
<!-- 代码02 -->
<div>
<img :src="require('@/'+ targetdata.imgpath)" >
</div>
targetdata是json数据里某个具体的数据,类似这样{...},imgpath是json里面本地图片的路径数据,若像代码02这样写,img标签直接写在外面div里,虽然图片也能显示出来,但控制台是会报出本文章标题出现的错误的;
解决办法如下:
1.在methods添加方法getpath:
...
methods:{
getpath(path){
return path ? require('@/' + path) : '';//path不为null就返回对应的路径
}