处理后端返回带标签数据的图片不显示问题

前言：在项目中经常会涉及到文件相关的展示操作，后端返回数据一般也是带标签的数据，这样可以根据要求来展示不同效果。如图所示：

问题：在返回的数据中图片返回只有后半截地址，导致图片无法显示。

 

原因： 因为服务器的域名可能会变换，所以数据库里的地址只能是相对路径；

解决办法：前端请求此图片的时候，需要后端提供图片文件真身所在的服务器域名，前端自己拼接前缀。

<img :src="srcPath" alt="" />

data() {
    return {
        //config.imgUrl：为自己拼接的地址前缀，可以写在全局js文件里面，供需要的地方使用
        srcPath: config.imgUrl + '/lemon/system/file/download.png'
    };
},

 补充：有时候后端返回回来的图片后半截地址可能也是需要替换的，但是文件内容有多处使用了图片展示，如何才能全局替换文件地址？

if (this.file && this.file.HTML) {
    //找到数据中所有出现了'/lemon/system/file/download'地址的地方
    const reg = new RegExp('/lemon/system/file/download.png', 'g');
    // config.imgUrl: 图片前缀， 拼接上要修改后地址
    const src = config.imgUrl + 'system/file/download.png';
    // TODO: 有的这里需要调用接口才能查看图片

    // 使用replace方法替换显示
    this.file.HTML = this.file.HTML.replace(reg, src);
}

最终效果：