【问题标题】：gatsby image not showing when hosted in aws amplify, but ok on local development / netlify / gatsby cloudgatsby 图像在 aws amplify 中托管时不显示，但在本地开发/netlify/gatsby cloud 上可以
【发布时间】：2021-06-18 07:03:50
【问题描述】：

测试

我正在通过启动器“Gatsby Default Starter”尝试 gatsby

gatsby new test

没有进行任何自定义，我在 localhost 上对其进行了测试，并且图像显示正常。

2021-06-22 更新 - 删除所有链接，在 reddit 中添加屏幕截图。

问题

但正如您所见，只有 aws amplify 上的图像丢失，而 netlify 和 gatsby cloud 上的图像看起来还不错，并且与我的本地开发测试保持一致。

有人知道为什么吗？我应该如何继续让它在 aws amplify 上也显示？我确实更喜欢 aws amplify 的仪表板，我的测试是针对即将到来的项目。

【问题讨论】：

标签： aws-amplify netlify

【解决方案1】：

我遇到了同样的问题，并在寻求解决的过程中偶然发现了这个问题。但是，根据此处提供的信息或原始发布者的 Reddit 链接，我无法解决问题。我需要做更多的研究，现在发布这个答案以提供更多的背景和清晰度。我的应用程序是使用 Gatsby 版本 4 创建并使用 AWS Amplify 部署的。

在 AWS Amplify 控制台中，选择您正在处理的应用程序，然后在“应用程序设置”下单击“重写和重定向”。然后在“重写和重定向”中单击“编辑”按钮并将您需要的文件类型添加到默认情况下应该存在的 200（重写）规则的正则表达式中。

原始海报似乎通过在正则表达式中添加“avif”解决了这个问题。但是，Gatsby 会生成“webp”图像，这是我必须添加的文件扩展名才能完成这项工作。下面是一个屏幕截图。希望这对以后遇到此问题的其他人有所帮助。

【讨论】：

【解决方案2】：

在reddit上发布并解决了：https://www.reddit.com/r/gatsbyjs/comments/o4s61m/gatsby_image_not_showing_when_hosted_in_aws/

解决方案

在重定向规则中添加文件类型“avif”。

【讨论】：

在我们的例子中，webp 也丢失了。