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

【问题标题】：Images not loading in React app when deployed on Heroku在 Heroku 上部署时，图像未在 React 应用程序中加载
【发布时间】：2020-10-24 18:46:02
【问题描述】：

我是一名新的 React 开发人员，正在尝试在 Heroku 上部署我的第一个 React 应用程序。

所有图片在本地加载正常，但在 Heroku 上部署时不再加载。

这是我网站的链接：https://yom-recipes.herokuapp.com/

每个盒子都应该从另一个组件传递过来的道具链接动态加载图像。

图像位于 src 内的文件夹中。

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

任何见解都非常感谢，谢谢！

【问题讨论】：

标签： reactjs image heroku deployment

【解决方案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;
}

移除不透明样式以显示您的图像

【讨论】：

谢谢！我没有意识到 Heroku 使用 0-1.0 度量而不是百分比。

【解决方案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%

【讨论】：