Cannot use images in AWS Amplify when using Basic React App

user_18087075 0
Viewed 446

I cannot for the life of me figure out how to host a React app in AWS Amplify while using images.

I used create-react-app to generate a project and pushed it into Github. Then, I deployed it into AWS Amplify and it works fine (images appear in the app such as './logo.svg' from create-react-app).

However, if I swap out the default SVG with my own image (any generic png), then push my changes to github (which deploys changes to Amplify), the image cannot be found in the app and displays as the alt text. I know for a fact my code works fine because locally I can use npm start and see my new image as expected. For some reason, images cannot be found in AWS Amplify once deployed.

Here is my amplify app at the time of writing: https://master.d2xzaf0ph9z41j.amplifyapp.com/

EDIT - adding file structure

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg
    new-img.png

EDIT2: Adding how the image is used:

import imgExample from './imgExample.JPG';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={imgExample} className="App-logo" alt="logo" />
        //more generic code
aws-amplify reactjs amazon-web-services
1 Answers

I struggled with this as well. For me I was using git-lfs and as it turns out the default build image used by AWS Amplify does not install git-lfs. The early indications were, from the browser's network debugger, I could see a file being successfully retrieved; however, it was far to small to be the image I wanted.

My solution was to create a custom build image which AWS Amplify will use to build my website. The steps on how I went about this and a link to the build image I used are in github.

user_55869910
Related