React 图像在本地加载，但不在 AWS Amplify 上

Posted 2023-02-19

【中文标题】React 图像在本地加载，但不在 AWS Amplify 上

【英文标题】：React images load locally but not on AWS Amplify

【发布时间】：2021-01-16 16:14:29

【问题描述】：

您好，我正在使用一个检索图像 URL 的 API。然后我试图将该 URL 传递到 标记如下：

<img class="img-fluid" src=this.state.representatives[i].pic/>

我在当地遇到

但是当我尝试在 AWS Amplify 上使用该应用程序时，我遇到了：

我尝试将 URL 硬编码到应用程序中，但它返回相同的错误。我真的很困惑从这里去哪里。

例如，从 API 中为 Mark Warner 提取的图像 URL 是 http://bioguide.congress.gov/bioguide/photo/W/W000805.jpg

我知道我并没有弄乱这个 URL，因为它在本地加载。我在某个地方犯了一个简单的错误吗？

【问题讨论】：

@bernnan 请在 stackblitz 中发布您的代码

您的 URL 以 http 开头，并且不附带 HTTPS 版本，您是通过 HTTP 还是 HTTPS 查看您的 AWS Amplify 应用程序？某些浏览器会阻止来自 HTTPS 网站的 HTTP 图像

@Ferrybig 看起来问题是控制台中的“混合内容”错误。具有图像 URL 的 API 链接到仅在 HTTP 中托管的网站，因此当 React 尝试将这些链接更新为 HTTPS 时，它会中断。有没有办法解决这个问题？

@brennanmcgowan 根据***.com/questions/47648656，没有办法解决这个问题，希望使用来自 HTTPS 源的图像

【参考方案1】：

转到应用设置 -> 重定向和重写并更改

源地址：^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^ .]+$)/>

类型从 200（重写）到 404（重写）

【参考方案2】：

我很欣赏 Ammar T. 的回答，但我只是在他的回答中添加了一些樱桃。 因此，如果您的二进制文件扩展名是其他内容，则在

^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+ $)/>

这个，然后只需将扩展名添加到其中。 即我使用的是 .jpeg 文件，所以对我来说我必须将其修改为

^[^.]+$|.(?!(css|gif|ico|jpg|jpeg|js|png|txt|svg|woff|ttf|map|json)$)([^. ]+$)/>

这个。

谢谢

【讨论】：

我的配置（默认）是“/”，应该考虑到上面提到的所有扩展吧？无论如何，无论我是否更改它，我都会遇到同样的问题。你是这样解决的吗？

这很有帮助...我用 *.JPG 命名了我的图像，这导致了问题！我只是更改为 jpg 而不是在 amplify 中编辑重写行，它对我有用。