Que dois-je faire si l’image renvoyée par uniapp ne s’affiche pas ?

Récemment, lors de l'utilisation d'uniapp pour développer des applications mobiles, j'ai rencontré un problème : les images renvoyées n'étaient pas affichées. Ici aujourd'hui, je vais partager avec vous comment j'ai résolu ce problème.

Tout d’abord, je voudrais présenter brièvement uniapp. Il s'agit d'un framework de développement d'applications multiplateforme basé sur le framework Vue.js, qui peut utiliser HTML, CSS et JavaScript pour créer des applications iOS et Android. L'utilisation d'uniapp nous permet d'écrire du code une seule fois et de l'exécuter sur plusieurs plateformes sans avoir à le développer séparément pour chaque plateforme.

Retour au sujet, lorsque j'ouvre l'appareil photo ou la galerie dans l'application pour sélectionner une photo, l'image revient à l'application depuis l'appareil photo ou la galerie, mais elle n'apparaît pas dans l'application. J'ai vérifié le code et n'ai trouvé aucune erreur, j'ai donc décidé de vérifier si le chemin d'accès à l'image était correct, car si le chemin d'accès à l'image était incorrect, l'image ne serait pas affichée.

Lors de la vérification du chemin de l'image, j'ai constaté que le problème venait de l'adresse de l'image. Dans uniapp, nous utilisons généralement l'encodage base64 pour afficher les images, mais dans mon application, je n'ai pas utilisé l'encodage base64, mais j'ai utilisé le chemin réel de l'image. C'est pourquoi l'image ne s'affiche pas correctement.

Pour résoudre ce problème, je dois modifier le code pour utiliser l'encodage base64. Dans Vue.js, nous pouvons utiliser la méthode btoa() pour convertir des fichiers en codage base64. Voici mon code modifié :

getLocalImgUrl: function (file) {
  return new Promise((resolve) => {
    var reader = new FileReader();
    reader.onloadend = function () {
      resolve(reader.result);
    }
    reader.readAsDataURL(file);
  })
},

Cette fonction convertit le fichier en codage base64 et renvoie le résultat codé en base64 sous forme de chaîne. Après avoir sélectionné la photo, j'appelle cette fonction et stocke l'encodage base64 renvoyé dans la propriété data du composant Vue.js. Voici le code modifié :

chooseImage: function () {
  var that = this;
  uni.chooseImage({
    count: 1,
    success: function (res) {
      that.getLocalImgUrl(res.tempFiles[0]).then((result) => {
        that.localImage = result; // 将base64编码的字符串存储在data属性中
      });
    }
  });
},

Désormais, lorsque je sélectionne la photo et reviens à l'application, l'image s'affiche avec succès dans l'application. Ce problème a été résolu.

Pour résumer, uniapp est un framework de développement d'applications multiplateformes très pratique. Pour développer avec succès une application, nous devons revérifier le code et nous assurer que les chemins d'image sont corrects, que le codage base64 est utilisé, etc. J'espère que mon expérience pourra aider les développeurs rencontrant des problèmes similaires.

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!