reactjs - 为什么我无法显示上传到 S3 的图像(.svg)

Question

我已经上传了一些 svg 图像到 S3 存储桶(我设置为 public-all)。上传所有 svg 图像后。我得到每个图像的 URL。当我点击这些 URL 时，它只是为我下载图像。
还。有谁知道为什么当我在 img 标签中使用这些 Url 时(例如 <img src='https://***.s3.***.amazonaws.com/***.svg/>`)。它只显示一个损坏的图像

这是我的 lambda 函数

'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

您需要将 S3 上的 svg 图像的内容类型设置为“image/svg+xml”。

通过 S3 控制台更改内容类型:

在 S3 控制台上选择对象

点击操作

点击更改元数据

将内容类型更改为 image/svg+xml。该值已在下拉列表中可用。

当您使用 API 网关上传图像时，您可以在 putObject 请求中设置相应的内容类型。

引用: AWS S3 Put Object API documentation

您可以引用以下 AWS 文档通过 JS 使用 ContentType 上传图像:

https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#putObject-property