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>