By using AWS re:Post, you agree to the Terms of Use

Images not Showing in Angular Application on Amplify

0

Images (from the src/assets/images/ folder) that show on the local version of the Angular application do not appear on the 'front end' version of the deployed Angular application.

  1. I can see the jpeg file in the CodeCommit repository so it pushed during the commit
  2. I believe that Angular copies all the files from the 'assets' folder across to the 'dist' folder during the compilation (based on the angular.json file). I checked -- the assets tag, and the folder 'src/assets' is in the angular.json file
  3. The fetch returns a '200' code

Not sure how to troubleshoot at this point

3 Answers
1

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

profile picture
answered 8 months ago
  • Hello Sri: thanks for the reply. Unfortunately, this use case is a little different. I'm looking to use images as part of the HTML/CSS so retrieving them would not work. Kind regards...

0

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.

SUPPORT ENGINEER
answered 8 months ago
  • Hi Tim: turns out it was a very simple problem. 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. Appreciate your detailed answer very much and will use it for future troubleshooting! Very Kind Regards...

0

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.

answered 8 months ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions