Hi, Good question
I think you need to store the images on S3 and retrieve them using Storage API.
Please let me know if that works
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.
Using Rekognition to process a batch of images on an S3 bucketasked 3 months ago
AWS-SDK configuration error In Angular application running on EC2 with instance profile roleasked 2 months ago
AWS Amplify Angular JS sample code not working on local machineasked 3 months ago
can we customise the "SIGNIN" logo displayed on the top of the browser tab to application name for cognito login page UIasked 6 months ago
Syncing Amplify Front-End Work across Organization Accountsasked 3 months ago
Redirect after login with aws-amplify/ui-angular 2.0asked 9 months ago
Checking the tokens that a server side app receives from front-end applicationasked 6 months ago
Add server side rendering to Angular/Amplify appasked 4 years ago
Unable to create the application versionasked 8 months ago
Images not Showing in Angular Application on Amplifyasked 8 months ago