9

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

Local server

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

enter image description here

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?

brennan mcgowan
  • 115
  • 1
  • 5
  • @bernnan please post your code in stackblitz – raju Oct 01 '20 at 01:39
  • 1
    Your URL starts with `http`, and does not come with an HTTPS version, are you viewing your AWS Amplify app over HTTP or HTTPS? Some browsers block HTTP images from HTTPS websites – Ferrybig Oct 01 '20 at 13:53
  • @Ferrybig looks like the problem is a "Mixed Content" error in the console. The API that has the URL for the images links to a website that only hosts in HTTP so when React tries to update these links to HTTPS, it breaks. Is there any way to get around this? – brennan mcgowan Oct 01 '20 at 13:56
  • @brennanmcgowan According to https://stackoverflow.com/questions/47648656/, there is no way to fix this, expect using images that come from an HTTPS source – Ferrybig Oct 01 '20 at 16:44

3 Answers3

21

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)

Ammar T.
  • 313
  • 2
  • 7
15

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

imjoymhnt
  • 1,011
  • 11
  • 14
  • 1
    My config (default) is "/<*>", which should take into account all the extensions mentioned above right? Anyway I am having the same problem whether I change it or not. Did you solve it this way? – Alexis Jun 21 '21 at 10:49
  • 1
    This was helpful... i had named my images with *.JPG which was causing the issue! i just changed to jpg rather than editing the rewrite line in amplify and it worked for me. – gbartusk Oct 18 '21 at 00:34
  • I had the same problem with `webp` images. Just added the extension to the list. Cheers! – Andrew Radulescu Jan 12 '23 at 11:53
0

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

import logo from './logo.png';

<img src={logo} alt="Logo" />
Alessio Campanelli
  • 970
  • 11
  • 19