Deux méthodes de chargement d'images pour les mini-programmes WeChat

Dans l'applet WeChat, pour afficher une image, il existe deux méthodes de chargement d'image :

1. Charger les images locales

2. images

Charger les images locales

<image class="widget__arrow" src="/image/arrowright.png" mode="aspectFill">
</image>

src="/image/arrowright.png" Cette phrase est Charger local ressources en images. Pensez à charger des images locales dans iOS, imageName :, similaire.

Chargement des images du réseau

WeChat est toujours très efficace pour charger le réseau, y compris le chargement de la voix et de la vidéo. Attachez directement l'adresse à l'attribut 'src' et elle sera chargée automatiquement.

 <image class="image_frame" src="{{imageUrl}}" mode="aspectFill">
 </image>

Cette imageUrl correspond aux données du fichier js

data:{
    imageUrl:"http://img1.3lian.com/2015/w7/85/d/101.jpg"
},

Elle peut également être écrite directement comme

<image class="image_frame" src="http://img1.3lian.com/2015/w7/85/d/101.jpg" mode="aspectFill">
</image>

Jetons un coup d'œil à quelques attributs de l'image

Il est à noter que : La largeur par défaut du composant image est de 300px et la hauteur est de 225px

src est ce qui est utilisé dans le code ci-dessus. Le mode

dispose de 12 modes, dont 3 modes zoom et 9 modes de recadrage.

Pour des instructions précises, il est recommandé de lire les documents officiels, qui sont très détaillés. Cliquez pour ouvrir le lien

C'est tout.

Problèmes d'héritage

En pratique, je souhaite implémenter une telle fonction : cliquez sur un bouton pour recharger l'image.

Je ne sais pas comment exploiter directement les images dans les fichiers js. Vous le saurez peut-être dans le futur. Si quelqu'un connaît la méthode, n'hésitez pas à laisser un message.

Supplément

Les questions restantes ont reçu une réponse.

Dans la méthode de réponse clé, vous pouvez directement utiliser setData pour définir une nouvelle adresse pour imageUrl

downLoadImage:function(event){
    console.log(event)
    var that = this;
    this.setData({
        imageUrl:"http://h.hiphotos.baidu.com/zhidao/pic/item/6d81800a19d8bc3ed69473cb848ba61ea8d34516.jpg"
    })
  }

L'effet est le suivant :

Recommandé : "Tutoriel de développement de mini-programmes"

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!