Why I cannot show my image(.svg) that uploaded to S3 - reactjs

Question

I've uploaded few svg image to a S3 bucket(I'v set to public-all).After I uploaded all svg images.I get each image's URL.When I clicked on those Url it just download the images for me.
Also. Does anyone know why when I use those Url in a img tag (e.g.<img src='https://***.s3.***.amazonaws.com/***.svg />`).It just shows a broken image
Here is my lambda function
'use strict'
const aws = require('aws-sdk')
const s3 = new aws.S3()
const { parse } = require('aws-multipart-parser')
const response = (statusCode, data) => ({
statusCode,
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
},
body: JSON.stringify(data)
})
exports.handler = async event => {
const inputData = parse(event, true)
if (inputData.file) {
try {
const params = {
Bucket: ***,
region: ***,
Key: `${inputData.file.filename}`,
Body: inputData.file.content,
ACL: 'public-read'
}
const s3Response = await s3.upload(params).promise()
return response(200, { statusCode: 200, url: s3Response['Location'] })
} catch (error) {
console.log('Error: ', error)
return response(500, {
error: error.message
})
}
} else {
return response(400, {
error: 'Please provide input file.'
})
}
}

Answer 1

You need to set the content type for you svg image on S3 to "image/svg+xml".
To change the content-type through S3 console :
Select the object on the S3 console
Click on actions
Click on change metadata
Change the content-type to image/svg+xml. The value is already available in the drop down.
As you are using the API gateway to upload the images, you can set the respective content type in you putObject request.
Reference : AWS S3 Put Object API documentation
You can refer the following AWS documentation to upload image with ContentType through JS :
https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#putObject-property

Answer 2

I faced a similar issue with SVGs being served from S3. On opening the svg url on the browser, it was working fine, but on passing the url in the imgs src attribute gave a broken image.
After comparing my svg with other working svgs I found that below attributes were missing in my svg.
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
On adding them it started working fine.
Something like this it has to be -
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
...
...
</svg>

Answer 3

My Front-End developers were complaining about this same issue. Blame AWS!
For some reason, they mark SVG images as binary/octet-stream instead of marking them as image/svg+xml.
My Back-End is developed in Golang and I use the official AWS SDK to Upload the files (https://github.com/aws/aws-sdk-go). What I did to fix the problem was pass by parameter the MimeType (ContentType) of the file.
If you don't pass AWS any MimeTypes then they will try to automatically identify a MimeType for your file, however they can make a mistake in some cases. If you pass a MimeType to AWS they will use your MimeType instead of trying to identify it, and that will likely solve the problem.
In my case in Golang I used this package to be able to automatically identify the MimeType https://github.com/gabriel-vasile/mimetype
var mimeTypePtr *string
mime := mimetype.Detect(file)
if mime != nil {
mimeType := mime.String()
mimeTypePtr = &mimeType
}
uploader := s3manager.NewUploader(cfg)
result, err := uploader.Upload(&s3manager.UploadInput{
Bucket: os.Getenv("AWS_BUCKET"),
Key: filename,
Body: file,
ContentType: mimeTypePtr,
})

Answer 4

In my case SVG image still gets forces download if its mime-type is image/svg
You can fix it by set the mime-type for the file is image/svg+xml