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

Answer 1

download mc.exe from this link minio download

or click this link mc. exe

after download open the command line where mc.exe is and enter this command

mc.exe alias set my mini http://192.168.1.101:9000 mini admin mini admin

or

mc.exe alias set my mini [your mini server URL] [minio username] [minio password]

after that, your browser can load images or file like this

Answer 2

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.