How to import and use image in a Vue single file component?

by

As simple as:

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

Taken from the project generated by vue cli.

If you want to use your image as a module, do not forget to bind data to your Vuejs component:

<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="css">
</style>

And a shorter version:

<template>
    <div id="app">
        <img :src="require("https://stackoverflow.com/questions/45116796/./assets/logo.png")"/>
    </div>
</template>
    
<script>
    export default {
    }
</script>
    
<style lang="css">
</style>

More Related Contents:

  1. How can I solve “Interpolation inside attributes has been removed. Use v-bind or the colon shorthand”? Vue.js 2
  2. How to implement debounce in Vue2?
  3. Vuex – Do not mutate vuex store state outside mutation handlers
  4. Which command do I use to generate the build of a Vue app?
  5. Mocking methods on a Vue instance during TDD
  6. Is it possible to emit from mounted in Vuejs?
  7. What is nextTick and what does it do in Vue.js?
  8. Can we make vue.js application without .vue extension component and webpack?
  9. How to use microfrontends with Vue/Nuxt?
  10. Vuejs: Event on route change
  11. Vuex – Computed property “name” was assigned to but it has no setter
  12. Vuex state on page refresh
  13. Vuejs and Vue.set(), update array
  14. How to pass a value from Vue data to href?
  15. How to watch store values from vuex?
  16. Accessing Vuex state when defining Vue-Router routes
  17. Vue JS: Difference of data() { return {} } vs data:() => ({ })
  18. Vue: shared data between different pages
  19. vue-router — Uncaught (in promise) Error: Redirected from “/login” to “/” via a navigation guard
  20. Nuxt.js vuex store not persisted
  21. Vue.js: Conditional class style binding
  22. Access vue instance/data inside filter method
  23. Vue: wait to render until all components are mounted
  24. Passing event and argument to v-on in Vue.js
  25. How to setup SASS/SCSS/sass-loader in Nuxt
  26. Vue 3 Vite – dynamic image src
  27. Vue.js – update router view
  28. How can I share data between non parent-child components in Vue
  29. What’s the correct way to pass props as initial data in Vue.js 2?
  30. How to correctly use “scoped” styles in VueJS single file components?

Leave a Comment