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

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