So erhalten Sie die Breite und Höhe des Bildes im WeChat-Applet

Herkunft

Zurzeit arbeite ich an Anforderung A, in der es einen kleinen Funktionspunkt gibt, der wie folgt beschrieben wird: Geben Sie ein Bild vom Konfigurationsende zurück und erwarten Sie, dass die Breite unverändert bleibt (750) und die Höhe sich an das Bild anpasst.

Ich dachte

// Zur Vereinfachung der Erklärung CSS als Stilattribut binden [nicht empfohlen] und den Wert von src fest codieren [kann später in den von der Schnittstelle zurückgegebenen Wert geändert werden]
<Ansichtsstil="width:100%;">
 <Bild src="{{src}}"></Bild>
</Ansicht>

Mein erster Gedanke war: Einstellen der Breite des Inhaltsbereichs: Bei 100 % wird die Bildschirmbreite automatisch ausgefüllt und die Höhe wird angepasst.

Tatsächlicher Effekt: Der vom Bild belegte Platz beträgt: Bildschirmbreite x 0

Lösung

Kern: Lösen Sie, wie Sie die Höhe des Bildes ermitteln

Primärplan

Wichtiger Punkt: Holen Sie sich die entsprechenden Bildinformationen, nachdem das Bild geladen wurde.

Nachdem ich die Entwicklungsdokumentation des Applets überprüft hatte, stellte ich fest, dass es einen Rückruf für das erfolgreiche Laden gibt:

Die Demo sieht wie folgt aus:

// wxml
<Ansichtsstil="width:100%;" >
 <image src="https://sf3-ttcdn-tos.pstatp.com/img/mosaic-legacy/3796/2975850990~300x300.image" bindload="loadSuccess" style="width:{{imageWidth}}px; height:{{imageHeight}}px"></image>
</Ansicht>

//js
Seite({
 Daten: {
 Bildhöhe: 0,
 Bildbreite: 0
 },
 loadSuccess(e){
 const { detail: {Breite, Höhe} } = e
 dies.setData({
  Bildbreite: Breite,
  Bildhöhe:Höhe
 })
 }
})

Schauen wir uns zunächst die Wirkung an:

Überlegen Sie einmal: Wenn ich 100 Bilder habe, die angepasst werden müssen, fallen dann viele umständliche setData()-Aufrufe an, die auch zu Performanceproblemen führen.

Erweiterte Lösung

Nachdem mich ein Freund daran erinnert hatte, stellte ich fest, dass das Miniprogramm „image“ eine Eigenschaft namens „Modus“ hat, mit der das Zuschneiden und Skalieren des Bilds eingestellt werden kann.

Die möglichen Werte für das Modusattribut sind wie folgt:

Sehen wir uns ohne weitere Umschweife an, was die tatsächliche Wirkung ist:

// 750x110 Bild <view style="width:100%;" >
 <image src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba1f75f0d29c40759b43ef910dacb4e7~tplv-k3u1fbpfcp-watermark.image" mode="widthFix"></image>
</Ansicht>

// 750x480 Bild <view style="width:100%;" >
 <image src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba1f75f0d29c40759b43ef910dacb4e7~tplv-k3u1fbpfcp-watermark.image" mode="widthFix"></image>
</Ansicht>

Schauen Sie sich das 750x110-Rendering an:

Schauen wir uns das Effektbild in der Größe 750 x 480 an:

An diesem Punkt müssen Sie nur den Wert von src in den von der Schnittstelle zurückgegebenen Wert ändern, und die Anforderungen an feste Breite und adaptive Höhe werden erfüllt.

endlich

Diese Eigenschaft dient hauptsächlich dazu, die Bildanpassungsfähigkeit zu erreichen. Mit anderen Worten, sie dient hauptsächlich dazu, sicherzustellen, dass das Bild nicht verzerrt wird.

Dies ist das Ende dieses Artikels zum Ermitteln der Breite und Höhe eines Bilds im WeChat Mini-Programm. Weitere Informationen zum Ermitteln der Breite und Höhe eines Bilds im WeChat Mini-Programm finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!