Jak importować i używać obrazu w jednym komponencie Vue?

Question

Myślę, że to powinno być proste, ale mam problem z importowaniem i używaniem obrazu w pojedynczym komponencie Vue. Czy ktoś może mi pomóc, jak to zrobić? Tu jest mój urywek kodu:

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

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

export default { 
} 
</script> 

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

Próbowałem, używając :src, src="{{ zapierLogo }}" itp ale nothings wydaje się działać. nie udało się znaleźć żadnego przykładu. Jakaś pomoc?

Answer 1

proste:

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

<script> 
export default { 
} 
</script> 

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

Zrobione z projektu wygenerowanego przez vue CLI.

Jeśli chcesz użyć obrazu jako moduł, nie zapomnij, aby powiązać dane do składnika 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> 

i krótszą wersję:

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

<script> 
export default { 
} 
</script> 

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

Answer 2

Jeśli chcesz je załadować przez webpack możesz po prostu użyć :src='require('path/to/file')' Upewnij się, że używasz : w przeciwnym razie nie wykona instrukcji require jako Javascript.