Home » vue » VueJs image not displayed

VueJs image not displayed

Posted by: admin November 26, 2021 Leave a comment


I have I think a small issue but I can’t resolve it since more than 2 hours …

I have a VueJs application and I’m trying to display an image that came from an API.

In my register.html I have that code :

<img :src="'./assets/' +nation.drapeau"/>

When I check the browser I see the correct path ‘./assets/images/drapeaux/AFC/Australie.png’ but nothing is displayed !!!! Why ? My path is not ok ?

What I’m doing wrong ?
This is the structure of my VueJs folder



If you use dynamic src, you have to use require. It is handled by webpack and it knows to put it in dist after build.

  <div>STATIC IMAGE</div>
  <img src="./assets/logo.png" />

  <div>DYNAMIC IMAGE</div>
  <!-- <img :src="'./assets/logo.png'" />  IT DOESN'T WORK-->
  <img :src="require('./assets/logo.png')" /> <!-- IT WORKS-->



Another source:

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


Try using require since it’s a dynamic src

<img :src=require(`./assets/${nation.drapeau}`)/>


The response , thanks guys :

<img :src="require('@/assets/' +nation.drapeau)"/>