反应 - 无法在 Heroku 上渲染图像

Question

I deployed a full stack web application on heroku.

The react images rendered using css files are showing fine on the deployed webpage. But the ones which are loading using import img from './img.jpg' are not showing on the webpage.

NOTE : They are showing fine on local machine (dev).

What could be the reason and what would be the solution to this?

React Component:

// images
import American from './American1.jpg';
import Italian from './Italian1.jpg';
import Indian from './Indian1.jpg';
import Chinese from './Chinese1.jpg';


// array for images
const foods = [American, Indian, Italian, Chinese];

// how they're being rendered
<div className="row justify-content-between">
    {foods.map((food, i) => {
        return (
            <div className="col-sm-6 col-lg-3 my-3" key={foodsNames[i]}>
                <div className="row justify-content-center">
                    <div className="col-11">
                        <Card className="MainCard">
                            <div className="card-image">
                                
                             // images used below
                                <Card.Img className="image" variant="top" src={food} />
                             // image used above 

                            </div>

                            <Card.Body>
                                <Card.Title className="card-title">{foodsNames[i]}</Card.Title>
                                <Card.Text>
                                </Card.Text>
                            </Card.Body>
                        </Card>
                    </div>
                </div>
            </div>

        )
    })}
</div>

Answer 1

Move your images to public folder, and access it like below in your component. I have my image (brand_icon.png) in direcory public/images

<img alt='' src={'../images/brand_icon.png'} />