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!