Vue和ElementUI中el-table的el-image的路径赋值问题

问题遇到的现象和发生背景

需要将imageList中的数据赋值到每一行中，但图片传递了地址却无法显示，imagePath是一个属性值，imageList是一个序列包含了多个对象，对象中包含了imagePath属性，试了很多方法还是不行

img


img


img

我想要达到的结果

img


img

采用拼接路径可以完成

impagePath应该是配置了之后后端返回的吧，如果都是统一的 @ 目录下的
那你就不要配置 @/ 符号，这样就可以了
比如 imagePath： "@/assets/xxx/xxx.png" 就修改为 "assets/xxx/xxx.png"

<el-image :src="require('@/' + scoped.row.imagePath)"></el-image>

如果这个impagePath就是你前端这边写的，那你也可以这样写，
impagePath: require("@/assets/xxx/xx.png")
模版使用

<el-image :src="scoped.row.imagePath"></el-image>

可以看一下这篇文章：https://blog.csdn.net/weixin_45526437/article/details/122395308

写一个回调函数，同一处理
function parsingUrl(url){
if(url){ // 需要做处理的路径
let imgUrl = require(url)
return imgUrl
}
return url // 直接返回的路径
}

你这个问题无解。

因为你的imgPath是使用本地目录字符串，本地目录的路径要么直接在template里写路径，要么在script里用require直接引入，但require不能使用动态变量方式在template里引用。

所以后端数据不能用本地目录字符串方式，建议使用网络图片格式，即http开头的图片地址。

参考文章
https://blog.csdn.net/weixin_34128411/article/details/89045805

一般@开头路径都被指向/src，题主是否没有配置 alias。
解决办法


```html
<img src="~@/assets/xxx/xxx.png" alt="">
或者
<img src="/static/xxx/xxx.png" alt="">

```

path完整的值是什么样的，发出来分析下

应该是这样的吧
:src="require(scoped.row.imagePath)"

img