Maison > interface Web > js tutoriel > le corps du texte

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

php中世界最好的语言
Libérer: 2018-04-11 17:13:50
original
11315 Les gens l'ont consulté

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%"/>
Copier après la connexion

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}
   ]
  }),
Copier après la connexion

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>
Copier après la connexion

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}}">
Copier après la connexion

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">
Copier après la connexion

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'
Copier après la connexion

. 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" />
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!