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

问题描述

嗨,我正在使用API​​来检索图像的URL。然后,我试图将该网址传递给 标签如下:

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

我在当地遇见

Local server

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

enter image description here

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

例如,从Mark Warner的API中提取图片网址为http://bioguide.congress.gov/bioguide/photo/W/W000805.jpg

,我知道我不会弄乱此URL,因为它是在本地加载的。我在某个地方犯了一个简单的错误吗?

解决方法

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

源地址:^[^.]+$|.(?!(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)$)([^.]+ $)/>

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

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

这个。

谢谢