Exemple de code de chargement d'image de développement d'applet WeChat (local, réseau)

Cet article présente principalement des informations pertinentes sur des exemples détaillés de chargement d'images (locales, réseau) dans les mini-programmes WeChat. Les amis dans le besoin peuvent s'y référer

Dans les mini-programmes WeChat, pour afficher une image, il y a. deux façons de charger des images :

1. Charger des images locales
   

2. Charger le réseau photos

Charger les photos locales

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

src ="/image/arrowright.png" Cette phrase sert à charger des ressources d'images locales. Pensez à charger des images locales dans iOS, imageName :, similaire.

Chargement des images réseau

WeChat est 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" 
},

Vous pouvez également l'écrire 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 convient de noter que la largeur par défaut du composant image est de 300px et la hauteur est de 225px

src 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 spécifiques, il est recommandé de lire la documentation officielle, qui est très détaillée.

C'est tout.

Problèmes restants

En pratique, je souhaite implémenter une telle fonction : cliquer 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é, utilisez directement 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 suit :

Merci d'avoir lu, j'espère que cela pourra vous aider, merci pour votre soutien à ce site !

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!