WeChat ミニ プログラムの 2 つの画像読み込み方法

WeChat アプレットで画像を表示するには、次の 2 つの画像読み込み方法があります:

1. ローカル画像の読み込み

2. ネットワークの読み込み画像

ローカル画像のロード

<image class="widget__arrow" src="/image/arrowright.png" mode="aspectFill">
</image>

src="/image/arrowright.png" この文はローカル画像のロードです画像リソース。 iOS でのローカル イメージの読み込み (imageName: など) について考えてみましょう。

ネットワーク写真の読み込み

WeChat はネットワークの読み込みに優れています。音声とビデオの読み込みを含みます。アドレスを「src」属性に直接添付すると、自動的にロードされます。

 <image class="image_frame" src="{{imageUrl}}" mode="aspectFill">
 </image>

このimageUrlはjsファイル内のデータです

data:{
    imageUrl:"http://img1.3lian.com/2015/w7/85/d/101.jpg"
},

次のように直接記述することもできます

画像のいくつかの属性を見てみましょう

次の点に注意してください: 画像コンポーネントのデフォルトの幅は 300px、高さは 225px

src は上記のコードで使用されています。

mode には 12 のモードがあり、そのうち 3 つはズーム モード、9 つはトリミング モードです。

#具体的な手順については、非常に詳細に説明されている公式ドキュメントを読むことをお勧めします。クリックしてリンクを開きます

#非常に簡単です。

##残された問題実際には、次のような機能を実装したいと思います。ボタンをクリックして画像をリロードします。

jsファイル内の画像を直接操作する方法がわかりません。将来的には分かるかもしれません。方法をご存知の方がいらっしゃいましたら、メッセージを残していただければ幸いです。

#補足

残りの質問は回答済みです。 キー応答メソッドでは、setData を直接使用して imageUrl

<image class="image_frame" src="http://img1.3lian.com/2015/w7/85/d/101.jpg" mode="aspectFill">
</image>

の新しいアドレスを設定できます。結果は次のとおりです。

推奨: 「
小さなプログラム開発チュートリアル

」

以上がWeChat ミニ プログラムの 2 つの画像読み込み方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。