Skip to content

Instantly share code, notes, and snippets.

@darnocer

darnocer/srcbind.md

Last active January 8, 2024 00:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save darnocer/07de47aa112e4e8108a1ce97154b40a9 to your computer and use it in GitHub Desktop.
Save darnocer/07de47aa112e4e8108a1ce97154b40a9 to your computer and use it in GitHub Desktop.
Download ZIP
Fix Images Not Displaying in Vue.js
Raw
srcbind.md

Images Not Displaying When Binding Data to :src with Vue

If you're using data binding to display an image with Vue.js, such as:

<img :src="'../assets/images/portfolio/' + item.image)" />

and the image is not displaying, it is because you need to require the path so that the string is recognized as a dependency:

<img :src="require(`../assets/images/portfolio/${item.image})`" />
@anyeelog
Copy link

Thank you!

@alibarcha
Copy link

thanks!

@mohamed-haroun
Copy link

It's easier to write the absolute path for the images like

<img :src="'src/assets/images/portfolio/' + item.image" />

as the full path will be https://somesite.com/src/assets/images/portfolio/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment