uniapp项目view标签设置动态背景图,也就是从服务器拿到的图片资源怎么设置上去
这是标签处的写法
<view class="points-mall"
:style="{backgroundImage:'url(' + utils.handlerImgUrl('static/gddg/pointsMallTitleBG.png') + ')'}">
</view>
utils.handlerImgUrl方法可以将放进去的服务器图片资源路径处理成url请求链接
方法如下 --方法在utils文件中
handlerImgUrl(url) {
if (!url) {
return url;
}
let formatUrl = '';
let imgBaseUrl = mpConfig.imgBaseUrl; // 拿到url地址
const baseUrlEndWithSlash = imgBaseUrl.endsWith('/');
const urlStartsWithSlash = url.startsWith('/');
const urlStartsWithHttp = url.startsWith('http');
if (urlStartsWithHttp) {
formatUrl = url;
} else if (baseUrlEndWithSlash && urlStartsWithSlash) {
formatUrl = imgBaseUrl + url.substring(1);
} else if (baseUrlEndWithSlash || urlStartsWithSlash) {
formatUrl = imgBaseUrl + url;
} else {
formatUrl = baseUrl + '/' + url;
}
console.log('打印图片链接',formatUrl);
return formatUrl;
}
这样子,页面中可以让view的背景图片使用网络资源
注:uniapp项目中图片来源使用服务器图片时,无论是使用img的src,还是view标签的style,都需要v-bind