Изображения React загружаются локально, но не в AWS Amplify

Question

Привет, я работаю с API, который извлекает URL-адрес изображения. Затем я пытаюсь передать этот URL-адрес в тег следующим образом:

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

Локально меня встречают

Но когда я пытаюсь использовать приложение на AWS Amplify, я встречаю:

Я попытался жестко ввести URL-адрес в приложение, но он возвращает ту же ошибку. Я действительно не понимаю, что делать дальше.

Например, URL-адрес изображения, полученный из API для Марка Уорнера: http://bioguide.congress.gov/bioguide/photo/W/W000805.jpg.

и я знаю, что не связываюсь с этим URL-адресом, поскольку он загружается локально. Я где-то делаю простую ошибку?

Answer 1

Перейдите в Настройки приложения -> Перенаправления и перезапись и измените

исходный адрес: </^[^.]+$|.(?!(css | gif | ico | jpg | js | png | txt | svg | woff | ttf | map | json)$)([^.]+$)/>

Введите от 200 (перезапись) до 404 (перезапись)

Answer 2

Я ценю ответ Аммара Т., но я просто добавляю немного вишенки к его ответу. Итак, если расширение вашего двоичного файла является другим, что недоступно в

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

это.

Спасибо

Answer 3

в моем случае я решил использовать этот синтаксис для импорта изображений:

      import logo from './logo.png';

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

Answer 4

Перейдите в «Настройки приложения» -> «Перенаправления и перезапись» и измените

исходный адрес: </^[^.]+$|.(?!(css|gif|ico|jpg|webp|jpeg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

Введите 200 (переписать)

Это исправит все ошибки для изображений в форматах jpg, png, jpeg,webp и остальных форматах.