无法从公用文件夹加载图像答案

【问题标题】：Cannot load images from public folder无法从公用文件夹加载图像
【发布时间】：2021-05-19 15:10:10
【问题描述】：

我将图片存放在公共文件夹中，图片名称是从1到图片数量的数字，所以我可以用图片来获取图片

       <img 
            ref={this.imageRef}
            src={process.env.PUBLIC_URL + `/images/${this.props.index}.jpeg`} 
            alt={`image #${this.props.index}`}
        />

当我在本地 npm 服务器上运行它时，图像被正确渲染，因此我可以看到它们，但是当我尝试从使用 AWS Amplify 部署的网站打开我的画廊时，它们没有加载，我只看到图像 alt 和图像标志。你可以在https://www.diamondcoring.ru/gallery查看它有什么问题？

【问题讨论】：

当我将其中一个图像 URL（例如https://www.diamondcoring.ru/static/media/26.c2225f92.jpeg）放入浏览器地址栏中时，它会呈现网页而不是返回图像。您确定网络服务器正确处理图像吗？
感谢您的回答，@JohnRotenstein。我确定我的反应应用程序组件正确处理图像。我尝试将图像存储在公用文件夹中，然后如上所述获取它们，并在我的组件中使用 JavaScript 从 src 文件夹中导入图像。这两种方式都可以在我的本地机器上正常工作，但是 aws Web 服务器存在一些问题。我是 AWS 服务的新手，所以我不知道它有什么问题。我会尝试使用 S3 存储桶上传图片，然后用 JS 将它们渲染到我的应用中。

标签： reactjs amazon-web-services image aws-amplify public

【解决方案1】：

我不知道为什么，但问题出在文件扩展名 .jpeg 中 - 它没有得到处理。 .jpg 或 .png 可以正常工作

【讨论】：