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

IT技术 javascript reactjs amazon-web-services ecmascript-6 amplify
2021-05-14 23:05:50

嗨,我正在使用一个检索图像 URL 的 API。然后我尝试将该 URL 传递到一个标签中,如下所示:

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

在当地我遇到了

本地服务器

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

在此处输入图片说明

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

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

我知道我不会在本地加载这个 URL 时弄乱它。我在某处犯了一个简单的错误吗?

2个回答

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

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

键入从 200(重写)到 404(重写)

我很欣赏 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)$)([^.]+$ )/>

这。

谢谢