web-dev-qa-db-fra.com

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

Je pense que cela devrait être simple, mais je suis confronté à quelques problèmes pour importer et utiliser une image dans le composant de fichier unique Vue. Quelqu'un peut-il m'aider comment faire cela? 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 }}", etc., mais rien ne semble fonctionner. n'a pas été en mesure de trouver un exemple aussi. De l'aide?

vue.jsvuejs2webpacker
20
aks

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 souhaitez utiliser votre image en tant que 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>
41
papey

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

5
li x

Je suis tombé sur ce problème récemment et j'utilise TypeScript . Si vous utilisez TypeScript comme je le suis, vous devez importer des ressources de la manière suivante:

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