ローカルの写真をミニプログラムの背景として使用する方法

WeChat ミニ プログラムのビューにローカル画像を直接設定できないことは承知しています。では、この問題をどうやって解決すればよいでしょうか?

(学習ビデオの共有: プログラミング入門)

解決策は次のとおりです:

1. ネットワーク画像を使用します

2. Base64 形式を使用します

3. 画像を使用してローカルの画像をロードし、インターフェイスの背景として使用します

最初の 2 つは非常に単純ですが、以下の 3 番目に焦点を当てましょう。一般に、誰もが悩むのは、インターフェイスの下部にイメージビューを配置することです。次に、以下のコードに直接移動します。
wxml

<view class="root">
  <image class=&#39;background-image&#39; src=&#39;../res/login_bg.png&#39; mode="aspectFill"></image>
  <view class="content">
  </view>
</view>

wxss

.root {
   width: 100%;
    height: 100%;
    background-color: #70c7da;
    position: relative;
}

.background-image{
   height : 100%;
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
}
.content{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

わかりました。相対レイアウトを使用している限り、それを実現できます。 Androidの相対レイアウトに似ています。あとは、すべてのコンテンツを content に書き込むだけです。

関連する推奨事項:小さなプログラム開発チュートリアル

以上がローカルの写真をミニプログラムの背景として使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。