score:3

Accepted answer

problem

you need to change the way you are importing the images:

1. import an image from the same source directory:

import img from "/path/to/image.svg"

<img src={img}/>

2. import an image from the public folder:

<img src="/path/to/image.svg"/>

solution:

if you want to import images dynamically and you are using webpack, you can use require.context:

const svgdir = require.context("!@svgr/webpack!../images");

then:

<img src={svgdir(`./${weather?.weather[0].icon}.svg`)}/>

score:0

a quick tip on how to fix this can be found here --> https://css-tricks.com/forums/topic/svg-css-background-image-not-showing-in-chrome/

i believe the problem is with the svg itself. if you open the svg in the browser and inspect the code you will see the svg contains just a base64 encoded png http://staging.flagstaff.ab.ca/templates/base/images/page-bg.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1922" height="432" viewbox="0 0 1922 432">
  <image id="swoosh" width="1922" height="432" xlink:href="data:img/png;base64,=====long base 64 encode here=====" >
</svg>

maybe some browsers/os have problems in rendering the svg in this way.

since it is not a real svg just convert it in png and use the png instead. or include the base64 directly in your css by changing

background-image: url('your-file.svg');
with

background-image: url('data:img/png;base64,=====long base 6

so...

xlink:href="data:img/png;base64,

to:

xlink:href="data:image/png;base64,

check this response --> chrome not rendering svg referenced via <img> element


Related Query

More Query from same tag