前言:
今天在開發(fā)小程序的時候用到背景圖片設(shè)定功能,但請求本地資源的圖片時卻提示錯誤,無法加載本地資源。那它的原因是什么呢?又有什么其他設(shè)置的方式?作者今天來給你解答
一、原因與解決方法
其實在小程序開發(fā)的時候我們無法通過wxss樣式表來獲取本地資源當(dāng)作背景圖片 我們只需要將樣式設(shè)置在wxml文件當(dāng)中即可。ps:在設(shè)置背景圖片的時候一定要分配好view組件的大小。
<view style="width: 100%;height: 600rpx;background-image:url(/static/veer-374337891.jpg);"></view>
二、其他設(shè)置背景圖片的方式
1、獲取網(wǎng)絡(luò)圖片
<view class="page" style=" background-image: url('url的地址');"></view>
2、將圖片轉(zhuǎn)換成base64格式
<view style=" background-image: url('base64圖片');"></view>
base64轉(zhuǎn)換器:https://c.runoob.com/front-end/59/文章來源:http://www.zghlxwxcb.cn/news/detail-485387.html
ps:小編在此不推薦用這種。因為有時候?qū)D片轉(zhuǎn)換成的base64的圖片后base64碼太長。文章來源地址http://www.zghlxwxcb.cn/news/detail-485387.html
3、使用image標簽
wxml
<view>
<image src="../stactic/bg.png"></image>
</view>
wxss
image {
position: absolute;
left: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
z-index: -999;//圖片疊加在底部
}
到了這里,關(guān)于微信小程序開發(fā):設(shè)定背景圖片的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!