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

Je rencontre un problème dans quasar qui est un cadre mobile basé vue la syntaxe du tidle ~assets/cover.jpg fonctionne dans le composant normal, mais pas dans mon composant défini dynamique, qui est défini par

let c=Vue.component('compName',{...})

enfin ce travail :

    computed: {
      coverUri() {
        return require('../assets/cover.jpg');
      }
    }

<q-img class="coverImg" :src="coverUri" :height="uiBook.coverHeight" spinner-color="white"/>

selon l'explication de https://quasar.dev/quasar-cli/handling-assets

In *.vue components, all your templates and CSS are parsed by vue-html-loader and css-loader to look for asset URLs. For example, in <img src="./logo.png"> and background: url(./logo.png), "./logo.png" is a relative asset path and will be resolved by Webpack as a module dependency.

Answer 2

Pour Vue 3, j'ai dû utiliser

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

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

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

Les deux sites src="@/assets/burger.jpg" et src="../assets/burger.jpg" n'a pas semblé fonctionner.