vue中配置接口返回不带域名的图片地址显示问题

前端上传图片，通过接口传给后端，需要前端渲染时，接口返回的图片路径如下图

其中的path就是图片地址，
而我们想渲染图片到前端页面，正常的思路是需要在前面加上服务器的域名

1.通过全局的域名引入，进而去展示

比如，我把全局域名封装到baseUrl.js中

// baseUrl.js
// 这里是一个默认的url，可以没有
let baseUrl = ''
// XXX自行替换域名-懂得都懂
if (process.env.NODE_ENV === 'delopment') {
  baseUrl = 'http://XXX.XXX.com'
} else {
  baseUrl = 'http://XXX.XXX.com'
}

export default baseUrl

然后在页面中import引入这个文件，

import http from '@/util/baseUrl'
export default {
  data() {
    return {
        url: http，
        imgUrl: '', //赋值上接口的那个path
    }
}
}

使用就是dom中绑定就行了

<img
class="img"
:src="url + imgUrl"
>

这样算是可以正常的去渲染，
但是假设，如果这个项目，你们是面对不同的客户群体，那么假设有100家，甚至上千家使用，是不是需要修改成百上千次baseUrl.js的全局域名。

还有一个最主要的问题，如果需要使用v-html去渲染文章的时候，假如文章中有图片，文件等等等等，那么是没有办法去使用这个全局的域名的

2.配置当前代理域名

我们知道接口返回的path路径 “/uploadfile/honor/3018b906-d076-426c-a4ef-663a28c9f6ea/3018b906-d076-426c-a4ef-663a28c9f6ea.png”

他的前缀是/uploadfile

那我们还记得vue.config.js中配置代理api的方式吗？

api代理的就是当前域名，举个例子后端接口都是/api/user/login等等，都是以/api开头的。
那么我们是不是可以配置一个以/uploadfile开头的呢？
当然是可以的。

devServer: {
    port: 8000,
    proxy: {
      '/api': {
        // target: 'https://mock.apifox.cn/m1/1579760-0-default',
        target: 'http://XXX.XXX.com',
        changeOrigin: true,
        ws: false
      },
      '/uploadfile': {
        target: 'http://XXX.XXX.com',
        ws: false,
        changeOrigin: true
      }
    }
  }

配置完这里之后，我么还需要引入baseUrl.js文件吗？
答案是不需要了。
前端页面中直接去获取接口的地址进行渲染就好了

<template>
<img
class="img"
:src="imgUrl"
>
</template>

<script>
export default {
  data() {
    return {
        imgUrl: '', //赋值上接口的那个path
    }
}
}
</script>

这里解决的一个主要问题就是前面提到的，v-html渲染文章类的图文的时候，会解决图片，文件渲染不出来的问题

到此就结束了，如有需要会随时更新本文章

原文地址：http://www.cnblogs.com/love920526/p/16876160.html