如何让vue的图片v-bind:src设定成绝对路径？

处男鉴黄师

vue设置了publicPath，图片的v-bind:src是来自后端的图片地址，然后在html页面里这个图片地址变成了vue服务端地址+publicPath+后端图片地址
如果有什么方法能够把:src设置成绝对路径应该就能正常显示，但网上搜了一大堆没有解决方案，要么就只能图片转blob或者canvas再渲染，太蛋疼了

凶手

你的 source 是线上的地址就别绑定呗 这还用搜？

凶手

再看了下可能误会了抱歉

意思是 <img :src="image"
image 是后端返回的线上地址吗

多放点代码出来呢？

宅男的爱

图片地址import进来一个变量，单独src这个变量

不过不建议这样用

处男鉴黄师

凶手 发表于 2021-3-24 14:01
再看了下可能误会了抱歉

意思是

简化的代码如下，很普通的异步加载后端动态图片列表

1. <template>
   
2.   <div v-for="item in itemList" :key="item.name">
   
3.     <img :src="base + picAddr" />
   
4.   </div>
   
5. </template>
   
6. <script>
   
7. import {BASEPATH} from 'xxx'
   
8. import {request} from 'yyy'
   
9. 
   
10. export default {
    
11.   computed: {
    
12.     base() {
    
13.       return BASEPATH + '/'
    
14.     }
    
15.   }
    
16.   data() {
    
17.     return {
    
18.       itemList: []
    
19.     }
    
20.   },
    
21.   methods: {
    
22.     getItemList() {
    
23.       let config= {
    
24.         url: 后端图片api地址,
    
25.         method: 'get',
    
26.         header: { "Content-Type": 'application/json' }
    
27.       }
    
28.       request(config).then(res=>{
    
29.         this.itemList = res.data
    
30.       })
    
31.     }
    
32.   },
    
33.   beforeMount() {
    
34.     this.getItemList()
    
35.   }
    
36. }
    
37. </script>

复制代码

处男鉴黄师

宅男的爱 发表于 2021-3-24 15:35
图片地址import进来一个变量，单独src这个变量

不过不建议这样用

图片地址是后端传来的列表里才有，不能直接写死

凶手

处男鉴黄师 发表于 2021-3-24 16:42
简化的代码如下，很普通的异步加载后端动态图片列表

拼了base当然就是主楼里描述的情况了呀

处男鉴黄师

凶手 发表于 2021-3-24 19:26
拼了base当然就是主楼里描述的情况了呀

base是后端的地址，上面代码里没有任何前端的地址，但最后渲染出来就变成了前端地址+pulic path+后端图片地址

糊状物

我寻思你要么直接整一个计算属性专门返回拼接完成的地址？

处男鉴黄师

糊状物 发表于 2021-3-24 19:56
我寻思你要么直接整一个计算属性专门返回拼接完成的地址？

试过了一样。估计是因为设置了public path，最后渲染出来总会自动加上前端的地址

凶手

处男鉴黄师 发表于 2021-3-24 20:26
试过了一样。估计是因为设置了public path，最后渲染出来总会自动加上前端的地址 ...

加协议了吗 http https

处男鉴黄师

凶手 发表于 2021-3-24 20:52
加协议了吗 http https

艹，果然加了协议就行了