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!