React Display image from database in a Table

Question

I am trying to get an image from the database in a table. The database contains the image name, the images are stored locally in /src/media The script is in /src/components

For now i am using a mock_data.json file instead of the actual database.

The JSON:

[{"id":1,"Image":"img1.jpg","Cr":"1/2","Name":"Goblin","Source":"Monster 
Manual","Type":"Humanoid","Size":"Medium","Alignment":"N","Tag":"tag","Info":"Info"},
{"id":2,"Image":"img2.jpg","Cr":"1/4","Name":"Spider","Source":"Monster 
Manual","Type":"Monster","Size":"Medium","Alignment":"N","Tag":"tag","Info":"Info"}
]

The SCRIPT:

import "./Monsters.css";
import data from "./mock_data.json";
import { useState } from "react";

export default function Monsters() {

const [monsters, setMonsters] = useState(data);
return (
         
    <div className="app-container">
        <h1>Monsters</h1>
        <table>
            <thead>
                <tr>
                    <th> </th>
                    <th>Cr</th>
                    <th>Name</th>
                    <th>Source</th>
                    <th>Type</th>
                    <th>Size</th>
                    <th>Alignment</th>
                    <th>Tag</th>
                    <th>Info</th>
                </tr>
            </thead>
            <tbody>
                {monsters.map((monster) => (
                    <tr>
                       <td><img src={`../media/${monster.Image}`} alt={monster.Name} width="25" /></td>
                        <td>{monster.Cr}</td>
                        <td>{monster.Name}</td>
                        <td>{monster.Source}</td>
                        <td>{monster.Type}</td>
                        <td>{monster.Size}</td>
                        <td>{monster.Alignment}</td>
                        <td>{monster.Tag}</td>
                        <td>{monster.Info}</td>
                    </tr>
                ))}
                
            </tbody>
        </table>
    </div>
    
)
};

If I inspect the webpage, I can see the name and location are correct

<img src="../media/img2.jpg" alt="Spider" width="25">

The image is not showing, the alt text is.

What am I doing wrong?

the images are stored locally in /src/media (img1.jpg and img2.jpg) - i also tried to put them in the components directory and edited the code, but same problem. Did not show — ray55nl
– ray55nl, Commented Feb 13, 2023 at 11:11

MrCode · Accepted Answer · 2023-02-13 12:20:17Z

2

To display images in /src/media then you can use require() like so:

<td><img src={require(`../media/${monster.Image}`)} alt={monster.Name} width="25" /></td>

This tells React you're referencing a local image which is out of the public folder, and it will be included in the build bundle.

The difference between this and putting images in public folder is this way, React bundles the images with the build number in the filename e.g. /static/media/img1.5c00184d3c036ea8ce95.jpeg, which changes with updates. This means the browser will not be stuck with an old/stale image.

If you use the public folder, and you update an image, the browser may load the old image from cache. The browser will simply see /img1.png as the src.

Another difference is using images inside src and require(), React will trigger errors for missing images, whereas in the public folder will not.

edited Feb 13, 2023 at 12:20

answered Feb 13, 2023 at 11:46

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ray55nl Over a year ago

Nice, also works, so i got 2 answers that i could use: The one from Eduardo Motta de Moraes and yours. Since it doesn't change my structure i think this is the one i will use. So if i got it correct, if images are in the public folder, you can call them without the require and if i put them anywhere outside the public folder, i need to use require to show them.

MrCode Over a year ago

Correct :) see my update for the differences.

e-motta · Accepted Answer · 2023-02-13 11:29:45Z

2

Assuming you're using create-react-app, if you move your image files to the Public folder, you should be able to reference them with the public folder env variable:

<th><img src={`${process.env.PUBLIC_URL}/media/${monster.Image}`} alt={monster.Name} width="25" /></th>

answered Feb 13, 2023 at 11:29

e-motta

7,5953 gold badges10 silver badges32 bronze badges

1 Comment

ray55nl Over a year ago

Thanks! That actually worked. But can not stop to wonder what is so different about your solution. The only thing that is changed was moving the media directory from the src directory to the public directory....?

Muhammad Misbah Ul Haq · Accepted Answer · 2023-02-13 11:21:44Z

0

The issue you are facing is due to CSS. Add height in to it you will get the desire result and it should be table data

 <tr>
   <td><img src={`../media/${monster.Image}`} alt={monster.Name} 
        height="25" width="25" />
  </td>
</tr>

answered Feb 13, 2023 at 11:21

Muhammad Misbah Ul Haq

344 bronze badges

1 Comment

ray55nl Over a year ago

Thanks for the reply, stupid! it has to be <td> I changed that. About the CSS, i added height, but it still don't show the image <img src="../media/img2.jpg" alt="Spider" height="25" width="25">

Collectives™ on Stack Overflow

React Display image from database in a Table

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related