Images not Showing in Angular Application on Amplify

Hi, Good question

I think you need to store the images on S3 and retrieve them using Storage API.

Please see more information at https://catalog.us-east-1.prod.workshops.aws/v2/workshops/9586a55a-1f61-456c-ace9-b24f505d44a4/en-US/40-storage/00-image-storage-with-s3

Please let me know if that works

Sri

Hello,

You’ll want to check the following items as the next troubleshooting steps:

1.) For an image to be accessed as a part of the deployment, you would need to make sure these are deployed as a part of the build artifacts.

You can you go to your Apps Amplify Console Dashboard, and in your current build download the build logs and artifacts and check if the artifacts ZIP contains the image assets and are in the correct location.

2.) Check your amplify.yml (or build spec on Amplify Console: https://docs.aws.amazon.com/amplify/latest/userguide/build-settings.html#yml-specification-syntax) to see if the artifacts location for the build phase is correct.

3.) You can create a production build of your project (e.g. running npm run build) locally on your machine and host the build directory using a local http server (you can make use of http-server npm module for this: https://www.npmjs.com/package/http-server).

This would help reproduce how the app is served over the Amplify console and you can check if the image resolved in the local http server or not.

4.) If that works, even after serving the static files of the production build using a HTTP server and specifically does not work on the Amplify Console, I would recommend checking the rewrites and redirects (https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html) set up on the Amplify console.

We’d recommend checking the network calls in the browsers developer console to identify what is happening when you try to reach that image link.

5.) If the locally served production build also displays similar behavior, it’s recommended to check how your Angular application code is developing the production build and whether or not the image files are being included in it or not.

You may need to troubleshoot at your end a bit to determine if this is specific to your Angular JS application or specific to Amplify.

In addition Sris linked workshop is a great resource.

The file extension for the background images was 'jpeg' which isn't recognized by whatever is serving the content. I changed the extension to 'jpg' and it works.

Can you check your html file if there is no ./ or ../ in front of assets?

Bad example: <img src="../assets/images/YourImageFile.png"> Good example: <img src="assets/images/YourImageFile.png">