0

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

Structure

Fizik26
  • 753
  • 2
  • 10
  • 25

3 Answers3

2

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.

<template>
  <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-->
</template>

Demo:

https://codesandbox.io/s/dazzling-leftpad-i3stg?file=/src/App.vue:0-281

Another source:

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

Cianekjr
  • 366
  • 1
  • 4
  • Hello, I've put `` but now I have that error when I run the serve : "This relative module was not found: * ./assets in ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"ecc62542-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./src/modules/RegisterModule/Register.html?vue&type=template&id=5a5f74b3&" – Fizik26 Nov 12 '21 at 20:56
  • it works with the @ like that -> `` – Fizik26 Nov 12 '21 at 21:11
0

Try using require since it's a dynamic src

<img :src=require(`./assets/${nation.drapeau}`)/>
Amaarockz
  • 4,348
  • 2
  • 9
  • 27
0

The response , thanks guys :

<img :src="require('@/assets/' +nation.drapeau)"/>
Fizik26
  • 753
  • 2
  • 10
  • 25