Comment transmettre l'adresse de l'image Uniapp à VIEW

Dans le processus de développement d'applications à l'aide d'Uniapp, nous avons souvent besoin d'afficher des images sur la page. Plusieurs fois, nous devons obtenir l’adresse de l’image via l’interface, puis l’afficher sur la page. Alors, comment transmettre l’adresse de l’image à VIEW ? Cet article vous le présentera en détail.

1. Utilisez la balise img

Dans Uniapp, vous pouvez utiliser la balise HTML img pour afficher des images. Vous pouvez utiliser le code suivant dans le modèle :

<img :src="imageUrl" />

Parmi eux, imageUrl est l'adresse de l'image. Dans Vue, vous pouvez lier une variable via des données pour la transmettre.

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

En liant imageUrl dans les données, elle peut être transmise facilement.

2. Utiliser des images d'arrière-plan

En plus d'utiliser la balise img, vous pouvez également utiliser CSS background-image pour définir une image d'arrière-plan. L'avantage de cette méthode est que vous pouvez définir la position, la taille et d'autres styles de l'image, vous offrant ainsi une plus grande liberté. Utilisez le code suivant dans le modèle :

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

Parmi eux, imageUrl est aussi l'adresse de l'image. La liaison peut également être transmise via les données dans Vue.

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

3. Utilisez le composant uni-image

De plus, Uniapp fournit également le composant uni-image pour afficher les images. À l'aide du composant uni-image, vous pouvez également définir l'image d'espace réservé pour le chargement et l'erreur de l'image. Utilisez le code suivant dans le modèle :

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

Parmi eux, imageUrl est aussi l'adresse de l'image. chargementImage et errorImage sont respectivement des images d'espace réservé lors du chargement et de l'erreur. La liaison peut également être transmise via les données dans Vue.

<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>

Ce qui précède explique comment transmettre l'adresse de l'image à VIEW dans uniapp. Vous pouvez choisir en fonction de la situation réelle. Si vous souhaitez simplement afficher l'image, vous pouvez utiliser la balise img ou l'image d'arrière-plan ; si vous devez définir l'image d'espace réservé pendant le chargement et l'erreur, vous pouvez utiliser le composant uni-image.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!