WeChat applet background image cannot be displayed

When developing a small program, set the background of the page and use the css code:

.page__bd{
    width: 100%;
    height: 220px;
    background: url('../../assets/img/images.jpg') no-repeat;
    background-size: 100% 100%;
}

is displayed on the debugging tool, but the scan is uploaded to the mobile phone But it can't be displayed.

This is because: background-image can only use network URL or base64 image encoding, and local images can only use the image tag src attribute. Of course, the image tag src attribute can also use network URL or base64 image encoding.

Solution:

The following is set by the image tag src attribute to realize the background image display

Interface structure:

<view class=&#39;set-background&#39;>
    <image class=&#39;background-image&#39; src=&#39;{{item.countryPic}}&#39;></image>
    <view class=&#39;background-content&#39;>
        <view class="set-background-avatar" background-size="cover">
            <image class="post-specific-image" src="{{item.picture}}"></image>
        </view>
    </view>
</view>

wxss style:

.set-background {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 150px;
}
.set-background-avatar {
    width: 220px;
    height: 150px;
}
.background-content {
    position: absolute;
    z-index: 1;
}
.background-image {
    width: 225px;
    height: 150px;
    opacity: 0.8;
}
.post-specific-image {
    width: 215px;
    height: 150px;
    vertical-align: middle;
}

Recommended: " Mini Program Development Tutorial"

The above is the detailed content of WeChat applet background image cannot be displayed. For more information, please follow other related articles on the PHP Chinese website!