表格图片加载不出来，破图，加载失败

ゝ一纸荒年。 2024-04-20 08:26 5阅读 0赞

## 表格图片加载不出来，破图，加载失败 ##

## 一、如果用el-upload组件将图片上传至服务器 ##

设置show-file-list="false"后，搭配  *使用可以上传头像，且上传后显示图片不显示＋加号。  
action是必选参数，上传图片上去的地址。  
headers设置上传的请求头部  
on-success文件上传成功时的钩子，上传方法：*

handleAvatarSuccess(res, file) {
         this.wjmcUrl = URL.createObjectURL(file.raw);
         this.fileName = res.data.bucketName + '-' + res.data.fileName;
    },

上传data：

headers: {
         Authorization: 'Bearer ' + store.getters.access_token
    },
         wjmcUrl: '',
         fileName:'',

上传样式：

这样即可完成上传图片。

## 二、但是，也会出现图片在表格中没法显示的问题 ##

如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]

解决方法：在表格初始化数据的地方，我的是在method方法中的getList里，对图片显示地址进行转换，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]

this.wjmcUrl = this.tableData[0].wjmc;
    for (var i=0;i<this.tableData.length;i++){
           if (this.tableData[i]["wjmc"]){
                this.tableData[i]["wjmc"]=this.pathNm+this.tableData[i]["wjmc"].split("-")[0]+"/"+this.tableData[i]["wjmc"].split("-")[1]
           }else{
               this.tableData[i]["wjmc"]=this.pathNm+"lsfw/暂无图片1.png";
           }
     };

this.tableData是指表格的数据信息，this.pathNm是data中添加url变量：`pathNm:'http://47.112.149.138:9000/'`

这样图片即可在表格中正常显示了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8de773e5b5834dc49d89523dc55df452.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/49a9b3aa45e4435abeb2f0871b5b1682.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d5a55323e3bd4ed49c3d47dfb859040a.png