Minio: Render images in browser

Question

I'm uploading my svg files to my local minio server (running in docker).

const uploadedFile = await client.putObject(bucketName, filename, readStream);

I then generate a public URL e.g. http://localhost:9000/link-identifiers/example.svg and I can download the files from there publicly

If I want to display it in the browser like <img src={picUrl}>, the images don't render at all.

I get those Response Headers in the browser:

HTTP/1.1 200 OK
Accept-Ranges: bytes
Content-Length: 124775
Content-Security-Policy: block-all-mixed-content
Content-Type: application/octet-stream
ETag: "109be6a37b9091e50651b3cbbe6bed3a"
Last-Modified: Wed, 02 Sep 2020 06:44:28 GMT
Server: MinIO/RELEASE.2020-08-07T01-23-07Z
Vary: Origin
X-Amz-Request-Id: 1630E4E87DF71408
X-Xss-Protection: 1; mode=block
Date: Wed, 02 Sep 2020 06:52:34 GMT

Is there any additional configuration for the minio server I need in order to make images render? If I'm able to download them & and they're perfectly fine (when viewing them), shouldn't they be able to render in the browser too?

Currently the permissions for the bucket are set to public with:

mc policy set public myminio/link-identifiers

Basifixed

Answer 1

The putObject function takes in an optional metadata argument.

  const metadata = {
  'Content-type': 'image',
};

Pass it on as an argument to the function to be able to render images.

Novia

this works, thanks :) – Mahout

me too, thank's! just added minioClient.putObject.contentType(file.getContentType())... – Oxidase