Que dois-je faire si uniapp ne parvient pas à charger les images de chemin local ?

Dans le processus de développement à l'aide d'uniapp, nous devons parfois charger des images à partir de chemins locaux. Cependant, dans le développement réel, vous pouvez rencontrer le problème du chargement d'images de chemin local qui ne peuvent pas être affichées. Ce problème est principalement dû au fait que les ressources d'image dans uniapp doivent être empaquetées et compilées, de sorte que le chemin peut ne pas être trouvé pendant l'exécution.

Voici plusieurs solutions courantes au problème du chargement d'images de chemin local pour votre référence.

1. Utiliser des chemins relatifs

Dans uniapp, le moyen le plus simple de charger des images de chemin local est d'utiliser des chemins relatifs, car les chemins relatifs peuvent localiser les ressources d'image en fonction de positions relatives.

Par exemple, si vous souhaitez charger une image et que son chemin relatif est :

../image/sample.jpg

, vous pouvez utiliser le code suivant pour charger l'image :

<template>
  <div>
    <img :src="imgUrl" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgUrl: '../image/sample.jpg',
    };
  },
};
</script>

2. Utilisez des chemins absolus

Si vous ne souhaitez pas utilisez des chemins relatifs, vous pouvez également utiliser le chemin absolu pour charger des images de chemin local.

Supposons que la structure de votre projet est la suivante :

├── image
│   └── sample.jpg
│   
├── pages
│   └── index
│       └── index.vue
└── uni.scss

Vous pouvez utiliser le code suivant pour charger des images :

<template>
  <div>
    <img :src="imgUrl" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgUrl: '/image/sample.jpg',
    };
  },
};
</script>

Le chemin ici est basé sur le répertoire racine pour garantir le chargement correct des ressources d'image.

3. Utilisez la fonction require

Dans certains cas, l'utilisation de chemins absolus et relatifs ne peut toujours pas résoudre le problème du chargement des images de chemin local. Pour le moment, nous pouvons utiliser la fonction require fournie par uniapp.

La fonction require est de charger une ressource à partir d'un chemin local ou d'un chemin réseau et de renvoyer le chemin de la ressource. Utilisez la fonction require pour garantir l'exactitude du chargement des ressources.

Ce qui suit est un exemple d'utilisation de la fonction require pour charger des images de chemin local :

<template>
  <div>
    <img :src="imgUrl" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgUrl: '',
    };
  },
  methods: {
    setImage() {
      this.imgUrl = require('../image/sample.jpg');
    },
  },
  mounted() {
    this.setImage();
  },
};
</script>

Il convient de noter que la fonction require n'est utilisée que pendant la phase de compilation, elle ne peut donc pas être utilisée pour charger dynamiquement des ressources au moment de l'exécution.

4. Introduire les images dans le dossier statique

Dans uniapp, nous pouvons placer des images sous le dossier statique et importer des images dans le fichier vue dans les pages avant utilisation. Cela nécessite l'utilisation de : @/static.

Supposons que l'image se trouve dans le dossier image sous le dossier statique du projet, elle peut alors être introduite dans le fichier vue comme ceci :

<template>
    <img :src="require(&#39;@/static/image/sample.jpg&#39;)"></img>
</template>

Ce qui précède est la solution au problème selon lequel uniapp ne peut pas charger les images de chemin local. Sélectionnez la méthode appropriée en fonction de la situation spécifique pour éviter la situation dans laquelle l'image ne peut pas être affichée.

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!