Pictures in “img” tag do not load

Question

A few days ago I started to create a web app to practice with Reacjs. The web app is very simple, it's a SPA where the superheroes will be shown in images (stored locally and without the use of a database, using a fake API) depending on the publisher that each hero belongs to.

Everything was going well until I tried to load the images corresponding to your screen. However the images did not load, as if the path was wrong or as if the images were not there. I have tried everything and nothing has worked. I need help to fix this.

This is the component where each image will be displayed individually.

import React from 'react'

export const HeroeCard = ({ 
    id, 
    superhero, 
    publisher, 
    alter_ego, 
    first_appearance, 
    characters 

}) => {

    console.log(id);

    return (
        <div className="card ms-3" style={ { maxWidth: 540 } } >
            <div className="row no-gutters">
                <div className="col-md-4">
                    <img src={ `./assets/heroes/${ id }.jpg` } className="card-img" alt={ superhero } />
                </div>
            </div>
        </div>
    )
}

This component is where each of the heores is filtered by its publisher and sent as filtered data as props to the "HeroesCard" component.

import React from 'react'
import { getHeroesByPublisher } from '../../selectors/getHeroesByPublisher'
import {HeroeCard} from './HeroeCard';

const HeroesList = ({ publisher }) => {
    
    const heores = getHeroesByPublisher( publisher );
    
    return (
        <div className="card-columns" >
            {
                heores.map( hero => (
                    <HeroeCard 
                        key={ hero.id } 
                        { ...hero }
                    />
                ) )
            }
        </div>
    )
}

export default HeroesList

And finally here is where the "HeoresList" component will be rederized to be shown in its respective screen.

import React from 'react'
import HeroesList from '../heroes/HeroesList'

const MarvelScreen = () => {
    return (
        <>
          <h1> Marvel Screen </h1> 
          <hr/> 

          <HeroesList publisher="Marvel Comics"/>
        </>
    )
}

export default MarvelScreen

And here are the images of the result when executing the code.

Also parse the HTML attributes using Chrome's developer tools. And the "img" tags tribute are displayed correctly.

And finally here is the structure of my "public" folder.

Answer 1

It appears to me that you have two heroes folders, One nested within the other. Try modify the src like this:

 <img src={ `./assets/heroes/heroes/${ id }.jpg` } className="card-img" alt={ superhero } />

Answer 2

<img src={ `./assets/heroes/${ id }.jpg` } className="card-img" alt={ superhero } />

when you are using . , it is a path relative to the original location. you should use
<img src={ /assets/heroes/id.jpg } className="card-img" alt={ superhero } />
or
<img src={../../../../public/assets/heroes/id.jpg } className="card-img" alt={ superhero } />
it's a little long. QAQ