vue.js - number - vue js template html

¿Cómo importar y usar la imagen en un componente de archivo único de Vue?

Question

Creo que esto debería ser simple, pero estoy enfrentando algunos problemas sobre cómo importar y usar una imagen en el componente de archivo único de Vue. ¿Puede alguien ayudarme a hacer esto? Aquí está mi fragmento de código:

<template lang="html">
<img src="zapierLogo" />
</template>
<script>
import zapierLogo from ''images/zapier_logo.svg''
export default {
}
</script>
<style lang="css">
</style>

He intentado usar :src , src="{{ zapierLogo }}" , etc., pero nada parece funcionar. No fue capaz de encontrar ningún ejemplo también. ¿Alguna ayuda?

Answer 1

Me encontré con este problema recientemente, y estoy usando Typescript. Si está utilizando Typescript como lo soy yo, entonces necesita importar recursos como este:

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

Answer 2

Si desea cargarlos por un paquete web, simplemente puede usar :src=''require(''path/to/file'')'' Asegúrese de usar : contrario, no ejecutará la instrucción require como Javascript.

Answer 3

Tan simple como :

<template>
<div id="app">
<img src="./assets/logo.png">
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
</style>

Tomado del proyecto generado por vue cli.

Si desea utilizar su imagen como un módulo, no olvide enlazar datos a su componente 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>

Y una versión más corta:

<template>
<div id="app">
<img :src="require(''./assets/logo.png'')" />
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
</style>