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

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

改为属性

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

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

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

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

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

改成这样试下呢：

item.url = require("/Users/hjz/Documents/本科毕业设计/青藏科考/20210126测试/2020青藏科考滇藏线_07.23拷/images/"+item.photo1[0]);

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

img

一定要用绝对路径吗……
把它移动到目录根下，新建一个img文件夹，用相对路径来试试？

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

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

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

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

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

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映射目录。

img


字符串错误

这样咧
item.url = [require("/Users/hjz/Documents/本科毕业设计/青藏科考/20210126测试/2020青藏科考滇藏线_07.23拷/images/"+item.photo1[0])]