Bootstrap

后端接口获取的对象包含图片,渲染后端图片,拼接地址渲染,循环列表,vue+uniapp

如果是全链接的好说,直接item.img就行,    <image  :src="item.icon" ></image>

如果是加背景就是:style="[{backgroundImage:'url('+item.img+')'}]"

另外一种就是后端返回文件名字或者一部分链接,前面需要拼接上baseurl

1.先引入

    import configService from '@/common/service/config.service';

2.使用

模板直接用configService就提示找不到,就是这样

  <image class="imgs" :src="`${configService.apiUrl}${item.icon}`"></image>

@引入能用,但是偶尔一个文件@就是找不到,找不到

不要这么写,那就换种写法

定义一个imgurl

    created() {
            this.imgurl = configService.apiUrl
            console.log('Config Service:', configService);
        },

    <image class="imgs" :src="`${imgurl}${item.icon}`"></image>

这样@不用动就可以找到了configService了,不然还得去../../显得很没水平,不清楚具体是因为没用configService就找不到还是因为是程序卡还是啥原因没找到,还是不要直接用了,赋值给个this值再用,没有后患

一种就是后端返回文件名字或者一部分链接,前面需要拼接上前端静态地址

   <image class="imgs" :src="'../../static/image/' + item.img"></image>
;