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

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 关于博途V17进行仿真时无法建立连接问题
  • ¥15 请问下这个红框里面是什么文档或者记事本编辑器
  • ¥15 机器学习教材中的例题询问
  • ¥15 求.net core 几款免费的pdf编辑器
  • ¥15 为什么安装HCL 和virtualbox之后没有找到VirtualBoxHost-OnlyNetWork?
  • ¥15 C# P/Invoke的效率问题
  • ¥20 thinkphp适配人大金仓问题
  • ¥20 Oracle替换.dbf文件后无法连接,如何解决?(相关搜索:数据库|死循环)
  • ¥15 数据库数据成问号了,前台查询正常,数据库查询是?号
  • ¥15 算法使用了tf-idf,用手肘图确定k值确定不了,第四轮廓系数又太小才有0.006088746097507285,如何解决?(相关搜索:数据处理)