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

Question

I think this should be simple  but I am facing some trouble on how to import and use an image in Vue single file component  Can someone help me how to do this  Here is my code snippet   lt template lang  quot html quot  gt       lt img src  quot zapierLogo quot    gt   lt  template gt        lt script gt      import zapierLogo from  images zapier logo svg           export default          lt  script gt        lt style lang  quot css quot  gt   lt  style gt   I have tried using  src  src  quot    zapierLogo    quot   etc  But nothing seems to work  I was not able to find any example too  Any help

User · Answer

I encounter a problem in quasar which is a mobile framework based vue  the tidle syntax  assets cover jpg works in normal component  but not in my dynamic defined component  that is defined by let c Vue component  compName          finally this work      computed          coverUri             return require     assets cover jpg                    lt q-img class  quot coverImg quot   src  quot coverUri quot   height  quot uiBook coverHeight quot  spinner-color  quot white quot   gt    according to the explain at https   quasar dev quasar-cli handling-assets  In   vue components  all your templates and CSS are parsed by vue-html-loader and css-loader to look for asset URLs  For example  in  lt img src  quot   logo png quot  gt  and background  url   logo png    quot   logo png quot  is a relative asset path and will be resolved by Webpack as a module dependency

User · Answer

It is heavily suggested to make use of webpack when importing pictures from assets and in general for optimisation and pathing purposes  If you wish to load them by webpack you can simply use  src  require  path to file    Make sure you use   otherwise it won t execute the require statement as Javascript   In typescript you can do almost the exact same operation   src  require    assets image png     Why the following is generally considered bad practice    lt template gt     lt div id  app  gt       lt img src    assets logo png  gt     lt  div gt   lt  template gt    lt script gt  export default      lt  script gt    lt style lang  scss  gt   lt  style gt     When building using the Vue cli  webpack is not able to ensure that the assets file will maintain a structure that follows the relative importing  This is due to webpack trying to optimize and chunk items appearing inside of the assets folder  If you wish to use a relative import you should do so from within the static folder and use   lt img src    static logo png  gt

User · Answer

As simple as   lt template gt       lt div id  quot app quot  gt           lt img src  quot   assets logo png quot  gt       lt  div gt   lt  template gt        lt script gt      export default          lt  script gt        lt style lang  quot css quot  gt   lt  style gt    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   lt template gt       lt div id  quot app quot  gt           lt img  src  quot image quot   gt       lt  div gt   lt  template gt        lt script gt      import image from  quot   assets logo png quot           export default           data  function                  return                   image  image                                lt  script gt        lt style lang  quot css quot  gt   lt  style gt   And a shorter version   lt template gt       lt div id  quot app quot  gt           lt img  src  quot require    assets logo png   quot   gt       lt  div gt   lt  template gt        lt script gt      export default          lt  script gt        lt style lang  quot css quot  gt   lt  style gt

User · Answer

I came across this issue recently  and i m using Typescript  If you re using Typescript like I am  then you need to import assets like so    lt img src    assets images logo png  alt    gt

User · Answer

You can also use the root shortcut like so     lt template gt      lt div class  container  gt       lt h1 gt Recipes lt  h1 gt         lt img src    assets burger jpg    gt      lt  div gt     lt  template gt    Although this was Nuxt  it should be same with Vue CLI

User · Answer

These both work for me in JavaScript and TypeScript   lt img src    assets images logo png  alt    gt     or    lt img src    assets images logo png  alt    gt

[vue.js] How to import and use image in a Vue single file component?

Examples related to vue.js

Examples related to vuejs2

Examples related to webpacker