首页 新闻 赞助 找找看

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
从来没有接触过这块,希望各位大神给予帮助,万分感谢~

vue
小白学无止境的主页 小白学无止境 | 初学一级 | 园豆:8
提问于:2020-04-06 13:54
< >
分享
最佳答案
-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
muamaker | 小虾三级 |园豆:763 | 2020-04-06 15:08
其他回答(1)
0

数据库存放的相对路径加域名地址,就是图片完整路径了;如果图片存webapi项目下,就是webapi的IP端口号,或者域名;如果是单独的图片服务器,那就是图片服务器的域名;

收获园豆:20
悟行 | 园豆:12559 (专家六级) | 2020-04-06 14:33
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册