Heim > Artikel > WeChat-Applet > Zwei Methoden zum Laden von Bildern für WeChat-Miniprogramme
Um ein Bild anzuzeigen, gibt es zwei Möglichkeiten, Bilder zu laden:
1. Lokale Bilder laden
2 Netzwerkbilder
Lokale Bilder laden
<image class="widget__arrow" src="/image/arrowright.png" mode="aspectFill"> </image>
src="/image/arrowright.png" Dieser Satz lautet „Laden“. lokale Bildressourcen. Denken Sie darüber nach, lokale Bilder in iOS zu laden, imageName:, ähnlich.
Netzwerkbilder laden
WeChat ist immer noch sehr gut darin, das Netzwerk zu laden. einschließlich des Ladens von Sprache und Video. Hängen Sie die Adresse direkt an das Attribut „src“ an und sie wird automatisch geladen.
<image class="image_frame" src="{{imageUrl}}" mode="aspectFill"> </image>
Diese Bild-URL sind die Daten in der js-Datei
data:{ imageUrl:"http://img1.3lian.com/2015/w7/85/d/101.jpg" },
Sie kann auch direkt geschrieben werden als
<image class="image_frame" src="http://img1.3lian.com/2015/w7/85/d/101.jpg" mode="aspectFill"> </image>
Werfen wir einen Blick auf einige Attribute des Bildes
Es ist zu beachten, dass: Die Standardbreite der Bildkomponente beträgt 300 Pixel und die Höhe 225 Pixel
src ist das, was im obigen Code verwendet wird.
Der Modus verfügt über 12 Modi, davon 3 Zoommodi und 9 Zuschneidemodi.
Für konkrete Anweisungen empfiehlt es sich, die offiziellen Dokumente zu lesen, die sehr detailliert sind. Klicken Sie hier, um den Link zu öffnen
Das ist es.
Legacy-Probleme
In der Praxis möchte ich so eine Funktion umsetzen: klicken eine Schaltfläche zum erneuten Laden des Bildes.
Ich weiß nicht, wie ich Bilder in js-Dateien direkt bearbeiten soll. Vielleicht wissen Sie es in Zukunft. Wenn jemand die Methode kennt, kann er gerne eine Nachricht hinterlassen.
Ergänzung
Die restlichen Fragen wurden beantwortet.
In der Schlüsselantwortmethode können Sie setData direkt verwenden, um eine neue Adresse für imageUrl festzulegen
downLoadImage:function(event){ console.log(event) var that = this; this.setData({ imageUrl:"http://h.hiphotos.baidu.com/zhidao/pic/item/6d81800a19d8bc3ed69473cb848ba61ea8d34516.jpg" }) }
Der Effekt ist wie folgt:
Empfohlen: „Mini-Tutorial zur Programmentwicklung“
Das obige ist der detaillierte Inhalt vonZwei Methoden zum Laden von Bildern für WeChat-Miniprogramme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!