Comment référencer des images statiques locales dans vue

Cette fois, je vais vous montrer comment référencer des images statiques locales dans Vue. Quelles sont les précautions pour référencer des images statiques locales dans Vue. Voici un cas pratique, jetons un oeil.

Écrivez la description de l'image ici

Exigence : Comment index.vue dans les composants peut-il extraire des images des actifs.

1. Écrivez le chemin directement dans la balise img :

<img src="../assets/a1.png" class="" width="100%"/>

2. Utilisez des tableaux pour enregistrer et recycler les résultats :

<el-carousel-item v-for="item in carouselData" :key="item.id">
    <img :src="item.url" class="carouselImg"/>
    <span class="carouselSpan">{{ item.title }}</span>
</el-carousel-item>
data: () => ({
   carouselData:[
   {url:require('../assets/a1.png'),title:'你看我叼吗1',id:1},
   {url:require('../assets/a3.png'),title:'你看我叼吗2',id:2},
   {url:require('../assets/a4.png'),title:'你看我叼吗3',id:3}
   ]
  }),

L'effet est le suivant :

Le code complet dans index.vue est le suivant :

<script>
  import footer1 from '../components/public/footer'
  export default {
  data: () => ({
   carouselData:[
   {url:require('../assets/a1.png'),title:'你看我叼吗1',id:1},
   {url:require('../assets/a3.png'),title:'你看我叼吗2',id:2},
   {url:require('../assets/a4.png'),title:'你看我叼吗3',id:3}
   ]
  }),
  components:{
      footer1
    },
 }
</script>

PS : Jetons un coup d'œil au chemin de référence de l'image dans Vue.js

Lorsque nous référençons des images dans le projet Vue.js, il existe les situations suivantes concernant le chemin de l'image :

Utilisez-en un

Nous définissons le chemin de l'image dans les données

imgUrl:'../assets/logo.png'

Ensuite, dans le modèle

<<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">img src="
{{imgUrl}}">

Ce n'est pas la bonne façon de l'écrire. Nous devrions utiliser v-bind pour lier l'attribut srcs de l'image

. :src="imgUrl">

Ou

<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">img src="../assets/logo.png">

Cette méthode fait référence au chemin selon la syntaxe HTML normale et peut être empaquetée par webpack lorsqu'elle est placée dans le modèle.

Utilisez-en deux

Quand on a besoin d'écrire le chemin de l'image dans le code js, si on écrit

dans les données imgUrl:'../assets/logo.png'

Pour le moment, webpack le traitera uniquement comme une chaîne et ne trouvera pas l'adresse de l'image. Pour le moment, nous pouvons utiliser l'importation pour introduire le chemin de l'image :

:src="avatar" />
import avatar from '@/assets/logo.png'

. Définir

dans les données avatar: avatar

Scénario 3

On peut également mettre l'image dans le dossier statique externe et la définir dans data :

imgUrl ： '../../static/logo.png'
:src="imgUrl" />

Ce qui précède explique comment nous référençons le chemin de l'image dans Vue.js.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Que dois-je faire si Vue s'actualise et affiche 404 après avoir empaqueté le projet ?

vue utilise la fonction xe-utils Explication détaillée des étapes de Ku

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!