webentwicklung-frage-antwort-db.com.de

Wie importiere und verwende ich ein Bild in einer einzelnen Vue-Dateikomponente?

Ich denke, das sollte einfach sein, aber ich habe einige Probleme beim Importieren und Verwenden eines Bildes in einer einzelnen Vue-Dateikomponente. Kann mir jemand helfen, wie das geht? Hier ist mein Code-Snippet:

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

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

export default {
}
</script>

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

Ich habe versucht, :src, src="{{ zapierLogo }}" usw. zu verwenden, aber Nothings scheint zu funktionieren. konnte auch kein Beispiel finden. Irgendeine Hilfe?

20
aks

So einfach wie : 

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

<script>
export default {
}
</script>

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

Aus dem von vue cli generierten Projekt.

Wenn Sie Ihr Bild als Modul verwenden möchten, vergessen Sie nicht, Daten an Ihre vuejs-Komponente zu binden 

<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> 

Und eine kürzere Version: 

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

<script>
export default {
}
</script>

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

Wenn Sie sie per Webpack laden möchten, können Sie einfach :src='require('path/to/file')' verwenden. Stellen Sie sicher, dass Sie : verwenden. Andernfalls wird die Anforderung nicht als Javascript ausgeführt.

5
li x

Ich bin kürzlich auf dieses Problem gestoßen, und ich verwende TypeScript. Wenn Sie TypeScript wie ich verwenden, müssen Sie Assets wie folgt importieren:

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