Beispielcode zum Laden von WeChat-Applet-Entwicklungsbildern (lokal, Netzwerk).

In diesem Artikel werden hauptsächlich relevante Informationen zu detaillierten Beispielen für das Laden von Bildern (lokal, Netzwerk) in WeChat-Miniprogrammen vorgestellt.

In WeChat-Miniprogrammen gibt es Beispiele für das Laden von Bildern Zwei Möglichkeiten, Bilder zu laden:

1. Lokale Bilder laden
   

2. Netzwerk laden Bilder

Lokale Bilder laden

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

src ="/image/arrowright.png" Dieser Satz dient zum Laden lokaler Bildressourcen. Denken Sie darüber nach, lokale Bilder in iOS zu laden, imageName:, ähnlich.

Netzwerkbilder laden

WeChat eignet sich sehr gut zum Laden des Netzwerks, 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 können es auch direkt als

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

schreiben. Werfen wir einen Blick auf einige Bildattribute

Es ist zu beachten, dass die Standardbreite der Bildkomponente 300 Pixel und die Höhe 225 Pixel beträgt

src wird im obigen Code verwendet.

Der Modus verfügt über 12 Modi, davon 3 Zoommodi und 9 Zuschneidemodi.

Für spezifische Anweisungen empfiehlt es sich, die offizielle Dokumentation zu lesen, die sehr detailliert ist.

Das ist es.

Verbleibende Probleme

In der Praxis möchte ich eine solche Funktion implementieren: Klicken Sie auf eine Schaltfläche, um das Bild neu zu laden.

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.

Verwenden Sie setData direkt, um eine neue Adresse für imageUrl in der Schlüsselantwortmethode 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 :

Vielen Dank fürs Lesen, ich hoffe, es kann Ihnen helfen, vielen Dank für Ihre Unterstützung dieser Website!

Das obige ist der detaillierte Inhalt vonBeispielcode zum Laden von WeChat-Applet-Entwicklungsbildern (lokal, Netzwerk).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!