vue将代码分成了两个组件,父组件向子组件传递参数的写法
因为我知道vue中加载本地图片需要添加require,所以在父组件中将图片地址进行处理,数据库中仅存储了图片名称,如下图:
我为了实验先传递一张图片
下面代码为父组件
this.getRequest('/collect-point/getpointinfo').then(resp => {
const data=resp;
data.forEach(item=>{
item.position=[item.lont,item.lat];
item.photo1=item.photo.split(",");
item.url="require('/Users/hjz/Documents/本科毕业设计/青藏科考/20210126测试/2020青藏科考滇藏线_07.23拷/images/"+item.photo1[0]+"')"
});
//console.log(data);
this.CollectPoint=data;
PS.还想请教一下如何通过循环写出一个[require('/Users/hjz/Documents/本科毕业设计/青藏科考/20210126测试/2020青藏科考滇藏线_07.23拷/images/20200601151834ls.jpg'),
require('/Users/hjz/Documents/本科毕业设计/青藏科考/20210126测试/2020青藏科考滇藏线_07.23拷/images/20200601151834ww.jpg')]样子的数组,而不是我为了实验只传了一个地址,因为后续要用el-image的preview-src-list预览大图)
将item.url成功传到了子组件,并且传进srcList,如下为子组件部分代码
srcLists.push({
photos:item.url,
});
<el-image
style="width: 100px; height: 100px"
:src="srcList.photos"
:preview-src-list="srcList1"
>
根据我console.log出来看,形式确实变成了require('/Users/hjz/Documents/本科毕业设计/青藏科考/20210126测试/2020青藏科考滇藏线_07.23拷/images/20200601151834ls.jpg')但图片一直加载失败,然后我直接将生成的这个形式直接放进:src="require('/Users/hjz/Documents/本科毕业设计/青藏科考/20210126测试/2020青藏科考滇藏线_07.23拷/images/20200601151834ls.jpg')"也是可以显示的。然后我尝试将父组件中的item.url的地址转为一个线上图片的地址(elment ui官方文档里那个图片)也成功显示出来了,说明值应该确实传过去了但为何srcList.photos传递本地图片不显示呢