背景:在工作中使用uniapp开发一款下单APP,里面涉及到商品列表,起初我使用的是view标签的backgroundImage属性去实现商品图片的动态渲染,图片路径由后端接口返回,但图片后期是由客户自己在后台维护上传,此时遇到一个问题是接口返回了一种路径是中文编码后的字符串,这种路径在真机和浏览器上显示不出来,但控制台打印出来具体路径后复制到浏览器又是能查看出图片的,所以推断并不是图片本身的问题,查看后面的图片发现一个UUID类的图片路径,这个路径对应的图片是显示出来了的。
问题:uniapp写APP端使用background-image时,中文编码后的图片路径在浏览器和真机上显示不了。
<view class="left">
<!-- backgroundImage解析后的图片路径在浏览器和真机上显示不了,换成img标签 -->
<!-- <view class="img-box" :style="{ backgroundImage: 'url(' + item.productImg[0].url + ')' }"
v-if="item.productImg && item.productImg.length > 0"></view>
<view class="img-box" v-else
style="backgroundImage: url(../../static/shoppingCar/tips-img.png) "></view> -->
<view class="img-box" v-if="item.productImg && item.productImg.length > 0">
<img :src="item.productImg[0].url" alt="" class="img-style">
</view>
</view>