Comment résoudre le problème selon lequel les images de l'album sélectionné ne sont pas affichées dans le projet uniapp

Dans le processus de développement à l'aide d'Uniapp, nous devons souvent utiliser la fonction de sélection d'images d'album. Cependant, nous rencontrons parfois le problème que les images ne s'affichent pas après la sélection. Dans cet article, je vais vous expliquer pourquoi ce problème se produit et comment le résoudre.

1. Pourquoi y a-t-il un problème selon lequel les photos de l'album ne s'affichent pas ?

1. Problèmes d'autorisation

Dans le système Android, nous devons demander dynamiquement l'autorisation de lire le stockage externe avant de pouvoir accéder à l'album photo. Si nous ne demandons pas l'autorisation avec succès, les images de l'album ne seront pas lues. et ne peut donc pas être affiché.

2. Problème de type de données

Lors de l'appel de l'API pour sélectionner les images de l'album, nous devons renvoyer un tableau pour charger les images sélectionnées, mais parfois il peut y avoir une incompatibilité de type de données dans notre code, ce qui entraîne que l'image sélectionnée ne peut pas être affiché sur la page.

3. Problème de chemin

Les images sélectionnées dans l'album doivent être affichées en utilisant le chemin de l'image lors du transfert vers la page d'accueil. Cependant, si notre chemin est mal écrit ou si le nom du fichier ne correspond pas, le chemin d'accès est incorrect. l’image sélectionnée ne s’affichera pas normalement.

2. Comment résoudre le problème selon lequel les images de l'album ne s'affichent pas ?

1. Vérifiez les problèmes d'autorisation

Lors de la sélection des photos de l'album, nous devons demander l'autorisation de lire le stockage externe. Si notre demande d'autorisation échoue, nous devons vérifier. Vous pouvez résoudre le problème d'autorisation en suivant les étapes suivantes :

(1) Ajoutez l'autorisation de lecture de stockage externe dans le fichier manifest.json :

"android": {
    "permission": [
      "android.permission.READ_EXTERNAL_STORAGE"
    ]
  }

(2) Dans la page où vous souhaitez utiliser la fonction de sélection des images de l'album , utilisez la méthode uni.requestAuthorize pour demander l'autorisation :

uni.requestAuthorize({
    scope: 'scope.writePhotosAlbum',
    success() {
        console.log('授权成功')
    },
    fail() {
        console.log('授权失败')
    }
})

2. Vérifiez les problèmes de type de données

Si nos types de données ne correspondent pas, l'image sélectionnée ne peut pas être affichée normalement sur la page. Nous devons faire attention au type de données utilisé dans le code, comme dans l'exemple suivant :

data() {
    return {
       imgList: [],
    }
},
methods: {
    chooseImage(){
        uni.chooseImage({
            count: 3,
            sizeType: ['original', 'compressed'],
            sourceType: ['album', 'camera'],
            success: function (res) {
                this.imgList = res.tempFilePaths; // 选择图片成功后将图片路径存入imgList数组
            }
        })
    }
}

Dans le code ci-dessus, nous stockons le chemin temporaire de l'image sélectionnée dans le tableau imgList, donc si nous devons afficher l'image sélectionnée image sur la page, peut être fait de la manière suivante :

<view>
    <image v-for="(item,index) in imgList" :src="item"></image>
</view>

Dans le code ci-dessus, nous utilisons v-for pour parcourir chaque élément du tableau imgList et utilisons la balise :image pour afficher l'image sur la page.

3. Vérifiez les problèmes de chemin

Nous devons utiliser le chemin correct comme référence lors de l'affichage des images, nous devons donc vérifier soigneusement si le chemin de l'image est correct et s'il y a des fautes d'orthographe et d'autres problèmes. Normalement, ce que nous retournons après avoir sélectionné une image est un chemin temporaire, mais lors de l'affichage de l'image, nous devons utiliser un chemin local. Nous pouvons obtenir le chemin local via la méthode suivante :

let realPath = '';
uni.getFileSystemManager().access({
        path: tempFilePaths,
        success() {
            realPath = wx.env.USER_DATA_PATH + '/' + new Date().getTime() + '.png'; //使用 wx.env.USER_DATA_PATH 获取本地存储路径
            uni.getFileSystemManager().saveFile({
                tempFilePath: tempFilePaths, // 临时文件地址
                filePath: realPath,
                success: (res) => {
                        console.log('保存图片到本地成功:' + res.savedFilePath)
                },
                fail: function (res) {
                    console.log(res);
                }
            });
        },
        fail() {
            console.log('访问失败')
        }
});

Avec la méthode ci-dessus, nous pouvons enregistrer l'image sélectionnée localement et appeler la fonction de rappel après un enregistrement réussi pour obtenir et afficher le chemin.

Résumé

Les images de l'album qui ne s'affichent pas sont un problème courant lorsque nous développons avec Uniapp. Généralement, ce problème est dû à des autorisations, des types de données ou des chemins d'accès incorrects, etc. Nous pouvons résoudre ce problème en vérifiant les autorisations, les types de données et les chemins. J'espère que cet article pourra aider tout le monde et rendre le processus de développement d'Uniapp plus fluide.

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!