Question 74446 in Reactjs Question posted in
The new location for the React Documentation can be found here.

React Display image from database in a Table – Reactjs

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.

enter image description here

What am I doing wrong?

Tags:

3

Answers


  1. 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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search