vue如何显示图片是后台传过来的图片地址
0
悬赏园豆：100
[已解决问题]
解决于 2020-04-07 13:35
后台数据库保存的图片地址是在项目文件根目录下的文件夹里面，但数据库保存时的地址里没有体现根目录，例如：
应该是后端项目代码所在的文件夹：E:\项目名称\项目名.API\wwwroot该文件夹下的文件夹（Upload/2020）内存放图片，但数据库存放的地址是：
Upload/2020/3424533962c7.png
...
会获取到多个不同名称的图片
前端获取到这些图片的地址后，需要怎么处理才能在前端正确显示？？？
<ul>
<li v-for ="item_img in imageList" :key="item_img.imageId">
<img class="demo-image" :src="item_img.src" alt="image...">
</li>
</ul>
getImageList() {
getImageList().then(response => {
this.imageList=response.data;
});
},
item_img.src就是后台传过来的地址：Upload/2020/图片名
直接将后端的地址放在前端是无法识别的，应该如何操作？
前端是vue，后端是.net core webapi
从来没有接触过这块，希望各位大神给予帮助，万分感谢~
最佳答案
-1
方法1、如果你用的 vue-cli 3.0 ,可以使用 环境变量。具体的自己去看文档。
方法2、简单办法就是：
后端肯定是有个具体的域名地址给你的 http://xxxx.com/
let host = "后端的地址"
getImageList() {
getImageList().then(response => {
// 这里 data ，你遍历一下。
response.data = response.data.map((item,index)=>{
item.src = host + item.src
return item
})
this.imageList=response.data;
});
},
收获园豆：80
其他回答(1)
0
数据库存放的相对路径加域名地址，就是图片完整路径了；如果图片存webapi项目下，就是webapi的IP端口号，或者域名；如果是单独的图片服务器，那就是图片服务器的域名；
收获园豆：20
