[FIXED] How to fetch image names from database and display them in react app

Issue

The images are stored in the client/public/images folder. And the file name and extension is fetched from a mysql database. How do I write the src attribute of the img element to display the images.

<img src={`%PUBLIC_URL%/images/${portraitFile}`} alt='' />

this is not working

My project structure:

- public
   -images
      - portrait.jpg
- src
   - components
       - image viewer component
- App.js

Solution

I've got it guys. It was supposed to be:

<img src={`/images/${portraitFile}`} alt='Portrait' width='70%'/>

since every component is rendered in the index.html file, I should've had made the src structure according to the index.html file. That was it

Answered By - SaLii

Answer Checked By - Marie Seifert (PHPFixing Admin)