h18857377611 2021-09-24 22:48 采纳率: 25%
浏览 1818
已结题

vue使用el-image加载本地图片失败

vue将代码分成了两个组件,父组件向子组件传递参数的写法
因为我知道vue中加载本地图片需要添加require,所以在父组件中将图片地址进行处理,数据库中仅存储了图片名称,如下图:

img


我为了实验先传递一张图片
下面代码为父组件

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传递本地图片不显示呢

  • 写回答

12条回答 默认 最新

  • 孙叫兽 前端领域优质创作者 2021-09-24 22:55
    关注

    把style="width: 100px; height: 100px"

    改为属性

    height="100px" width="100px"

    评论

报告相同问题?

问题事件

  • 系统已结题 10月2日
  • 赞助了问题酬金 9月24日
  • 创建了问题 9月24日

悬赏问题

  • ¥15 用hfss做微带贴片阵列天线的时候分析设置有问题
  • ¥50 我撰写的python爬虫爬不了 要爬的网址有反爬机制
  • ¥15 Centos / PETSc / PETGEM
  • ¥15 centos7.9 IPv6端口telnet和端口监控问题
  • ¥120 计算机网络的新校区组网设计
  • ¥20 完全没有学习过GAN,看了CSDN的一篇文章,里面有代码但是完全不知道如何操作
  • ¥15 使用ue5插件narrative时如何切换关卡也保存叙事任务记录
  • ¥20 海浪数据 南海地区海况数据,波浪数据
  • ¥20 软件测试决策法疑问求解答
  • ¥15 win11 23H2删除推荐的项目,支持注册表等