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

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"

    打赏 评论
  • 前端菜小白leo 2021-09-25 07:27

    我知道什么原因了,修改代码如下

     
    <el-image
              v-for="(item,index) in srcLists"
              :key="index"
              style="width: 100px; height: 100px"
              :src="item.photos"
              :preview-src-list="srcList1"
              >
    

    如果上面还是不行,感觉你的代码不单单只有一个问题,方便私聊吗?

    打赏 评论
  • 嘿!小老头 2021-09-25 10:23

    你用的好像是相对路径,看看图片是不是404

    打赏 评论
  • Roc-xb 2021-09-25 16:45

    改成这样试下呢:

    item.url = require("/Users/hjz/Documents/本科毕业设计/青藏科考/20210126测试/2020青藏科考滇藏线_07.23拷/images/"+item.photo1[0]);
    
    
    打赏 评论
  • hbxncjs 2021-09-26 10:34

    图片路径里不能有中文吧
    还有,你要引用的图片必须放进项目内的文件夹里,不能放到项目以外
    然后图片路径要用url()括起来

    img

    打赏 评论
  • 搬砖小李鸭 2021-09-26 11:34
    这样咧
    item.url = [require("/Users/hjz/Documents/本科毕业设计/青藏科考/20210126测试/2020青藏科考滇藏线_07.23拷/images/"+item.photo1[0])]
    
    打赏 评论
  • 一定要用绝对路径吗……
    把它移动到目录根下,新建一个img文件夹,用相对路径来试试?

    如果引用绝对路径,感觉少了点什么……
    路径不应该像这样:
    D://Users/hjz/Documents/本科毕业设计/青藏科考/20210126测试/2020青藏科考滇藏线_07.23拷/images/
    磁盘卷名……

    打赏 评论
  • mynamecxy 2021-09-26 19:07

    因为vue生产环境中是隐藏了打包的真实目录的。你一切的路径和打包后的路径是有差别的。你可以用@代表src根目录。普通地址直接带@/加后面地址。如果用了:src的话。要用requie方法进行解析。这样图片就不会加载不了。用了element ui图片你还得看api中懒加载的使用方式。而不如用v-lazy进行懒加载。element ui不要全用其组件。它最有用的是一样基本样式。如删格化系统。

    打赏 评论
  • 放风喽 2021-09-27 07:27

    路径不能全是变量。
    比如require(a),a是变量是不行的。
    但是require(/usr/${a}),这样就可以

    打赏 评论
  • 123end 2021-09-27 08:05

    圖片路徑里肯定不能有中文的

    打赏 评论
  • gjf450005950 2021-09-28 21:48

    默认情况下本地启动是没有能力访问项目目录外的数据。

    require("绝对路径 or 相对路径")
    1、绝对路径:http开头 或 c:/Users
    2、相对路径: ./开头 或 /开头,./ 当前文件路径,/根目录

    /Users/hjz/Documents/本科毕业设计/ 这种格式是根路径模式

    项目启动后需要 localhost:8080/Users/hjz/Documents/本科毕业设计/ 指向图片
    1、映射目录(本地开发,devServer 拦截/Users 指向本地一个硬盘地址。服务器如nginx,拦截/Users指向本地磁盘盘符)
    2、图片放到项目下(图片放到public下(比如/public/Users/hjz/Documents/xxx.png),不管本地还是发布部署都没问题,访问方式:域名:端口/Users/hjz/Documents/xxx.png)

    本地开发:
    第一种
    const path = require('path');
    devServer: {
    static: {
    directory: path.join(‘c:/’, 'Users'),
    },
    };
    第二种,这种更靠谱,与服务器一致
    本地启动nginx,端口9090,使用/User映射本地目录
    devServer: {
    proxy: {
    '/User': {
    target: 'http://localhost:9090',
    }
    }
    }

    服务器,nginx映射目录。

    打赏 评论
  • weixin_46537459 2021-09-29 16:34

    img


    字符串错误

    打赏 评论

相关推荐 更多相似问题