I am using minio storage for storing images on my VPS. When user uploads the image it is converted to .png format on my API POST route using sharp like code below.

import sharp from "sharp"

async function convertFileToPng(
  file: File | null | undefined
): Promise<Blob | null> {
  if (!file) return null

  // Read the file contents
  const buffer = await file.arrayBuffer()

  // Convert the file to a PNG image
  const pngBuffer = await sharp(buffer)
    .resize(1920, 1080, { fit: "inside", withoutEnlargement: true })
    .png()
    .toBuffer()

  // Create a Blob from the PNG buffer
  const pngBlob = new Blob([pngBuffer], { type: "image/png" })
  return pngBlob
}

export async function POST(req) {
  const formData = await req.formData()

  const file = formData.get("file")
  const pngFile = await convertFileToPng(file)

  await uploadImage({ bucketName: "images", file: pngFile })

  // ...return
}

// trying to display the image like this
import Image from "next/image"

export default MyImageComponent() {
  return <Image 
           src={"http://127.0.0.1:9000/images/image-hash.png"}
           width={500} 
           height={500}
           alt="image preview"
          />
}

This works if the user uploads image types like png, jpeg, etc. But if a user uploads .svg, that image isn't rendered properly and I receive the following error in console:

The requested resource "http://127.0.0.1:9000/images/image-hash.png" has type "image/svg+xml" but dangerouslyAllowSVG is disabled.

I have a few questions regarding this issue:

- Am I not correctly converting uploaded images?
- Is it bad to convert file formats on serverless environment?
- Is there an easier way of doing all this that I am overlooking?