Svg images from aws is not displaying in my nextjs project

Question

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 8-Mar-22 6:25am

Jamal Kareem

Updated 8-Mar-22 12:19pm

Add a Solution

1 solution

Add a Solution

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

Afzaal Ahmad Zeeshan · Accepted Answer · 2022-03-08T12:19:00

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[^]

Svg images from aws is not displaying in my nextjs project

1 solution

Solution 1

Add your solution here

Preview 0

Svg images from aws is not displaying in my nextjs project

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us