React Display image from database in a Table

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.




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">
                    <th> </th>
                { => (
                       <td><img src={`../media/${monster.Image}`} alt={monster.Name} width="25" /></td>

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?

>Solution :

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.

Leave a Reply