React images load locally but not on AWS Amplify

Question

Hi I am working with an API that retrieves the URL of an image. I am then trying to pass that URL into an tag as follows:

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

Locally I am met with

But when I try to use the app on AWS Amplify, I am met with:

I have tried hardcoding the URL into the app but it returns the same error. I am really confused where to go from here.

For example the image URL pulled from the API for Mark Warner is http://bioguide.congress.gov/bioguide/photo/W/W000805.jpg

and I know I am not messing with this URL as it loads locally. Am I making a simple error somewhere?

Answer 1

Go to App Settings -> Redirects and Rewrites and change the

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

Type from 200 (Rewrite) to 404 (Rewrite)

Answer 2

I appreciate Ammar T.'s answer, but I just add some cherry to his answer. So if your binary file extension is something else, which is not available in the

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

this, then just add that extension into it. i.e I was using a .jpeg file, so for me I had to modify it into

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

this.

Thanks

Answer 3

in my case, I've solved using this sintax to import images:

import logo from './logo.png';

<img src={logo} alt="Logo" />