1

I am trying to pass images as prop into a react component and I having a hard time getting them to display.

I made a json object of images and I looped through them with .map on a component. Now I am trying to import them on a 'sub-component' but its not displaying. On my dev tool, it is showing just the html image attribute.

enter image description here enter image description here enter image description here enter image description here

Kalamarico
  • 5,466
  • 22
  • 53
  • 70
Patrick Akhamiogu
  • 29
  • 5
  • Can you be more specific? I saw the img rendered with the src of the svg placed inside your data.json. I don't understand what is exactly your problem! – Kalamarico Dec 31 '21 at 12:25
  • Please post your code in code blocks, not images of it. You have two options. You can either move your "img" folder to the public folder, which would then be reachable with [your.url]/img/myimage.png and change the data in your json to the according relative path - which is more easy - or use an approach for dynamic import based on your variable. You should find answers here: https://stackoverflow.com/questions/43823289/how-to-import-image-svg-png-in-a-react-component – MichelleFuchs Dec 31 '21 at 13:54
  • @Kalamarico Thanks for your prompt response. What got rendered is the html image path name, the image itself was not rendered on the page I am trying to create. I am thinking it has something to do with material ui because each images in a card components for material ui are imported as html attributes showing its path name but in my case, I am looping and importing the images from a json object. If you like we could do a zoom call so I can show you my code. – Patrick Akhamiogu Dec 31 '21 at 14:03
  • @MichelleFuchs Thanks for your prompt response. I initially tried using public folder images. That didn't work or maybe I didn't do it well. If you are free we could do a zoom call so I can show you my code. – Patrick Akhamiogu Dec 31 '21 at 14:06
  • @PatrickAkhamiogu sorry my delay. Happy new year by the way :D Ok, now I'm understand perfect. At "first think", the problem maybe it's on CardHeader element. I said that because, as you said, it's render the "name" property of the object, and as far as I can saw in your question, it's the only place where you are using it.... If you could provide an stackblitz or something where I reproduce it, I would be more helpful – Kalamarico Jan 01 '22 at 00:40

0 Answers0