uniapp项目view标签设置动态背景图,即设置图片为服务器图片

avatar
作者
筋斗云
阅读量:0

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

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!