部署在 Heroku 上時，圖像未加載到 React 應用程序中

Question

我是一名新的 React 開發人員，試圖在 Heroku 上部署我的第一個 React 應用程序。

所有圖像在本地都可以正常加載，但在部署到 Heroku 時不再加載。

這是我網站的鏈接： https://yom-recipes.herokuapp.com/

每個盒子都應該從另一個組件傳遞的道具鏈接動態加載圖像。

圖像位於 src 中的文件夾中。

<img src={require(`../images/${props.link}.jpg`)} alt={props.name}/>

任何見解都非常感謝，謝謝！

Answer 1

.btn-note img {
    display: block;
    position: relative;
    top: -5px;
    text-align: center;
    width: 220px;
    border-radius: 12px;
    margin-bottom: -25%;
    overflow: hidden;
    /* opacity: 1%; */ comment here
    z-index: 1;
}

刪除不透明樣式以顯示您的圖像

Answer 2

增加不透明度

.btn-note img {
    display: block;
    position: relative;
    top: -5px;
    text-align: center;
    width: 220px;
    border-radius: 12px;
    margin-bottom: -25%;
    overflow: hidden;
    opacity: 100%;
    z-index: 1;
}

而不是不透明度：1%；，將其增加到 100%