WeChat applet background image cannot be displayed-Mini Program Development-php.cn

WeChat applet background image cannot be displayed

尚

Release： 2020-03-26 15:55:54

Original

7372 people have browsed it

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(&#39;../../assets/img/images.jpg&#39;) no-repeat;
    background-size: 100% 100%;
}

Copy after login

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>

Copy after login

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;
}

Copy after login

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!