Static image src in Vue.js template

by

This solution is for Vue-2 users:

  1. In vue-2 if you don’t like to keep your files in static folder (relevant info), or
  2. In vue-2 & vue-cli-3 if you don’t like to keep your files in public folder (static folder is renamed to public):

The simple solution is 🙂

<img src="@/assets/img/clear.gif" /> // just do this:
<img :src="require(`@/assets/img/clear.gif`)" // or do this:
<img :src="require(`@/assets/img/${imgURL}`)" // if pulling from: data() {return {imgURL: 'clear.gif'}}

If you like to keep your static images in static/assets/img or public/assets/img folder, then just do:

<img src="./assets/img/clear.gif" />
<img src="/assets/img/clear.gif" /> // in some case without dot ./

More Related Contents:

  1. What should I do to use this webpacked JS library? [closed]
  2. What does the @ mean inside an import path?
  3. Module not found: Error: Can’t resolve vue, path not correct
  4. Webpack-dev-server compiles files but does not refresh or make compiled javascript available to browser
  5. How to disable ESLint in vue-cli?
  6. How to bind img src to data in Vue
  7. Managing jQuery plugin dependency in webpack
  8. How to fix navigator / window / document is undefined in Nuxt
  9. Expose jQuery to real Window object with Webpack
  10. How to load all files in a directory using webpack without require statements
  11. webpack dynamic module loader by require
  12. ES6 modules implementation, how to load a json file
  13. Angular 2 – communication of typescript functions with external js libraries
  14. How to format Vuetify data table date column?
  15. When should I use brackets with imports
  16. How to store Configuration file and read it using React
  17. Arrow Function syntax not working with webpack?
  18. Webpack babel 6 ES6 decorators
  19. How to load all server side data on initial vue.js / vue-router load?
  20. Webpack bundles my files in the wrong order (CommonsChunkPlugin)
  21. Access vue instance/data inside filter method
  22. How to access to a child method from the parent in vue.js
  23. How to use dynamic tailwind classes with JS switch statement and pass them correctly in Vue?
  24. Vue: How do I call multiple functions with @click?
  25. “You may need an additional loader to handle the result of these loaders.”
  26. How to navigate using vue router from Vuex actions
  27. Webpack 4 migration CommonsChunkPlugin
  28. Detect Back Button in Navigation Guards of Vue-Router
  29. What does this javascript syntax mean ? (0, _parseKey2.default)(something) [duplicate]
  30. How to dynamically import SVG and render it inline

Leave a Comment