WeChat 애플릿 배경 이미지를 표시할 수 없습니다

작은 프로그램을 개발할 때 페이지 배경을 설정하고 CSS 코드를 사용하세요:

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

디버깅 도구에서는 표시되지만 스캔하여 휴대폰에 업로드할 때는 표시되지 않습니다.

배경 이미지는 네트워크 URL 또는 base64 이미지 인코딩만 사용할 수 있고 로컬 이미지는 이미지 태그 src 속성만 사용할 수 있기 때문입니다. 물론 이미지 태그의 src 속성은 네트워크 URL이나 base64 이미지 인코딩을 사용할 수도 있습니다.

해결책:

다음은 배경 이미지 표시를 구현하기 위해 이미지 태그 src 속성에 의해 설정됩니다.

인터페이스 구조:

<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 스타일:

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

권장: "Mini 프로그램 개발 튜토리얼"

위 내용은 WeChat 애플릿 배경 이미지를 표시할 수 없습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!