部署在 Heroku 上时，图像未加载到 React 应用程序中

Question

I'm a new React developer attempting to deploy my first React app on Heroku.

All the images load fine locally, but no longer load when deployed on Heroku.

Here is the link to my site: https://yom-recipes.herokuapp.com/

Each box is supposed to load an image dynamically from a prop link passed over from another component.

The images are located in a folder within src.

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

Any insight deeply appreciated, thanks!

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;
}

remove opacity style to show your image

Answer 2

Increase your opacity

.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;
}

instead of opacity: 1%;, increase it to 100%