反應 - 無法在 Heroku 上渲染圖像

Question

我在 heroku 上部署了一個完整的堆棧 web 應用程序。

使用css 文件渲染的反應圖像在部署的網頁上顯示良好。 但是使用import img from './img.jpg'加載的那些沒有顯示在網頁上。

注意：它們在本地機器 (dev) 上顯示良好。

可能是什么原因以及解決方案是什么？

反應組件：

// 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

將您的圖像移動到公共文件夾，並在您的組件中訪問它，如下所示。 我的圖片 (brand_icon.png) 在目錄 public/images

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