0

I am using a relative path to display some images. I want to dynamically load a certain part of the path from my database (essentially a number like so:

'../../assets/img/pictograms/${this.state.pictoNumber}.svg'

Which works fine.

Now I want to insert that string as my src for an image component - I am using a custom one called FittedImage but hopefully that will not cause any issues - like so:

<FittedImage fit="auto" src={'../../assets/img/pictograms/${this.state.pictoNumber}.svg'} />

This however results in no image being displayed whereas this works:

import img from '../../assets/img/pictograms/1.svg'
**** .... ****
'../../assets/img/pictograms/${this.state.pictoNumber}.svg'

Can someone explain why and propose how to solve this?

JVS
  • 2,592
  • 3
  • 19
  • 31
  • https://stackoverflow.com/questions/42296499/how-to-display-svg-icons-svg-files-in-ui-using-react-component – HDM91 Dec 05 '21 at 13:50
  • afaik or understand this is not dynamic, right? – JVS Dec 05 '21 at 14:03
  • 1
    I have looked at fittedImage component in github , it set src as backgroundImage I think this is a problem for svg url – HDM91 Dec 05 '21 at 14:14
  • 1
    maybe this link helps you https://stackoverflow.com/questions/10768451/inline-svg-in-css – HDM91 Dec 05 '21 at 14:15

0 Answers0