Click here to Skip to main content
15,392,261 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
0


I am storing SVG images on AWS S3, when I try to display the images in my nextjs project, it does not show the images, but when I display PNG and other image extensions, it displays fine.

When I tried displaying SVG images from random websites, it displays fine as well.

Please what could be the problem?


What I have tried:

<img src="https://buychops-app.s3.amazonaws.com/cate_uploads/g-mYZJNRSC-cold-drinks.svg" alt="Svg Image from AWS S3 Bucket" /> //It does not display

<img src="https://www.svgrepo.com/show/404692/1st-place-medal.svg" alt="Svg Image from a random website" />//It displays successfully
Posted
Updated 8-Mar-22 12:19pm

1 solution

The reason is the access limitations on your S3 bucket. Try opening the SVG file in a new tab. You receive the following as a response:

XML
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>G5S59TAMS86Q5QP2</RequestId>
<HostId>ax/lusx95jNsKdAyMRZFIML0gKbk+c7sMVm0UFyuKn2Xto/NBAsiuBdRC91+GvHBRGmAz95UvnQ=</HostId>
</Error>
This is not an SVG, and the web browser will not be able to render the content on the screen.

Grant the permissions (public in this case) to the S3 and your SVG should work just fine. https://docs.aws.amazon.com/AmazonS3/latest/userguide/example-walkthroughs-managing-access-example1.html[^]
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900