WeChat Mini Program Development: Setting Background Image

Foreword:

Today, when developing a small program, I used the background image setting function, but when I requested the image of the local resource, an error was displayed, and the local resource could not be loaded. What is the reason for it? Is there any other way to set it? The author will give you an answer today

1. Reasons and solutions

In fact, when developing a small program, we cannot use the wxss style sheet to obtain local resources as a background image. We only need to set the style in the wxml file . ps: Be sure to allocate the size of the view component when setting the background image.

<view style="width: 100%;height: 600rpx;background-image:url(/static/veer-374337891.jpg);"></view>

2. Other ways to set the background image

1. Get network pictures

<view class="page" style=" background-image: url('url的地址');"></view>

2. Convert the image to base64 format

<view style=" background-image: url('base64图片');"></view>

base64 converter: https://c.runoob.com/front-end/59/

ps: The editor does not recommend this. Because sometimes the base64 code is too long after the image is converted into a base64 image.

3. Use the image tag

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;//图片叠加在底部
      }