当托管在 aws amplify 中时，gatsby 图像不显示，但在本地开发/netlify/gatsby 云上正常

Question

考试

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

gatsby new test

在没有进行任何定制的情况下，我在本地主机上进行了测试，图像显示正常，看起来不错。

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

问题

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

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

Answer 1

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

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

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