So übergeben Sie die Uniapp-Bildadresse an VIEW

Bei der Entwicklung von Anwendungen mit Uniapp müssen wir häufig Bilder auf der Seite anzeigen. Oft müssen wir die Bildadresse über die Schnittstelle abrufen und sie dann auf der Seite anzeigen. Wie übergibt man also die Bildadresse an VIEW? In diesem Artikel wird es Ihnen ausführlich vorgestellt.

1. Verwenden Sie das img-Tag

In Uniapp können Sie das HTML-img-Tag verwenden, um Bilder anzuzeigen. Sie können den folgenden Code in der Vorlage verwenden:

<img :src="imageUrl" />

Unter anderem ist imageUrl die Adresse des Bildes. In Vue können Sie eine Variable über Daten binden, um sie zu übergeben.

<script>
export default {
  data() {
    return {
      imageUrl: "http://www.image.com/img.jpg"
    }
  }
}
</script>

Durch die Bindung von imageUrl an Daten kann diese bequem übergeben werden.

2. Hintergrundbilder verwenden

Zusätzlich zur Verwendung des img-Tags können Sie auch CSS-Hintergrundbild verwenden, um ein Hintergrundbild festzulegen. Der Vorteil dieser Methode besteht darin, dass Sie die Position, Größe und andere Stile des Bildes festlegen können, was Ihnen mehr Freiheit gibt. Verwenden Sie den folgenden Code in der Vorlage:

<div :style="{ backgroundImage: &#39;url(&#39; + imageUrl + &#39;)&#39; }"></div>

Unter anderem ist imageUrl auch die Adresse des Bildes. Die Bindung kann auch über Daten in Vue erfolgen.

<script>
export default {
  data() {
    return {
      imageUrl: "http://www.image.com/img.jpg"
    }
  }
}
</script>

3. Verwenden Sie die Uni-Image-Komponente

Zusätzlich stellt Uniapp auch die Uni-Image-Komponente zum Anzeigen von Bildern zur Verfügung. Mit der Uni-Image-Komponente können Sie auch das Platzhalterbild für das Laden von Bildern und für Fehler festlegen. Verwenden Sie den folgenden Code in der Vorlage:

<uni-image :src="imageUrl" :loading-src="loadingImage" :error-src="errorImage"></uni-image>

Unter anderem ist imageUrl auch die Adresse des Bildes. „loadingImage“ und „errorImage“ sind Platzhalterbilder beim Laden bzw. Fehler. Die Bindung kann auch über Daten in Vue erfolgen.

<script>
export default {
  data() {
    return {
      imageUrl: "http://www.image.com/img.jpg",
      loadingImage: "http://www.image.com/loading.png",
      errorImage: "http://www.image.com/error.png"
    }
  }
}
</script>

Oben erfahren Sie, wie Sie die Bildadresse in uniapp an VIEW übertragen. Sie können entsprechend der tatsächlichen Situation auswählen. Wenn Sie das Bild nur anzeigen möchten, können Sie das img-Tag oder das Hintergrundbild verwenden. Wenn Sie beim Laden ein Platzhalterbild festlegen müssen und ein Fehler auftritt, können Sie die Uni-Image-Komponente verwenden.

Das obige ist der detaillierte Inhalt vonSo übergeben Sie die Uniapp-Bildadresse an VIEW. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!