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渲染文章类的图文的时候,会解决图片,文件渲染不出来的问题
到此就结束了,如有需要会随时更新本文章
不怕打不死的流氓,就怕耍流氓的流氓