The WeChat applet background-image directly sets the local image path, the editor displays normally, but the real machine does not display the solution

project scene

WeChat applet, set background-image to directly set the local image path.

Problem Description

The editor displays normally, but the real machine does not display

Cause Analysis

background-image can only be encoded with network url or base64 image.

solution

1. Convert the local image to the network url and set it on the background-image.
For example, cloud development, upload local images in the background

2. Convert the local image to base64 format and set it to background-image

3. Abandon the background-image assignment method and use the image component tag src attribute instead