Comment importer et utiliser une image dans un composant Vue à fichier unique ?

Question

Je pense que cela devrait être simple, mais je rencontre quelques difficultés pour importer et utiliser une image dans un composant Vue à fichier unique. Quelqu'un peut-il m'aider à le faire ? Voici mon extrait de code :

<template lang="html">
  <img src="zapierLogo" />
</template>

<script>
import zapierLogo from 'images/zapier_logo.svg'

export default {
}
</script>

<style lang="css">
</style>

J'ai essayé d'utiliser :src , src="{{ zapierLogo }}" Mais rien ne semble fonctionner. Je n'ai pas trouvé d'exemple non plus. Une aide ?

Answer 1

Aussi simple que :

<template>
  <div id="app">
    <img src="./assets/logo.png">
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss">
</style> 

Tiré du projet généré par vue cli.

Si vous voulez utiliser votre image comme un module, n'oubliez pas de lier les données à votre composant Vuejs.

<template>
  <div id="app">
    <img :src="image" />
  </div>
</template>

<script>
import image from "./assets/logo.png"

export default {
    data: function () {
        return {
            image: image
        }
    }
}
</script>

<style lang="scss">
</style> 

Et une version plus courte :

<template>
  <div id="app">
    <img :src="require('./assets/logo.png')" />
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss">
</style>

Answer 2

Si vous souhaitez les charger par webpack, vous pouvez simplement utiliser :src='require('path/to/file')' Veillez à utiliser : sinon il n'exécutera pas l'instruction require comme Javascript.

Answer 3

J'ai rencontré ce problème récemment, et j'utilise Typescript. Si vous utilisez Typescript comme moi, vous devez importer les actifs comme suit :

<img src="@/assets/images/logo.png" alt="">

Answer 4

Vous pouvez également utiliser le raccourci Racine comme suit

  <template>
   <div class="container">
    <h1>Recipes</h1>
      <img src="@/assets/burger.jpg" />
   </div>
  </template>

Bien que ce soit Nuxt, il devrait être le même avec Vue CLI.

Answer 5

Les deux fonctionnent pour moi en JavaScript et TypeScript.

<img src="@/assets/images/logo.png" alt=""> 

ou

 <img src="./assets/images/logo.png" alt="">