1

I have a blazor WASM site, and I am trying to display an SVG image directly from blob storage. I have tried using

<img src="https://rmssdstorage.blob.core.windows.net/mixandswirlimages/cbf53722-5889-4100-8c2e-30b8500e1a3d.svg" height="300"/>

but this results in a broken image link. You can see that this image is there on the server: you are able to download it by clicking on the link: https://rmssdstorage.blob.core.windows.net/mixandswirlimages/cbf53722-5889-4100-8c2e-30b8500e1a3d.svg

I've also tried using

<object type="image/svg+xml" src="https://rmssdstorage.blob.core.windows.net/mixandswirlimages/cbf53722-5889-4100-8c2e-30b8500e1a3d.svg"></object>

but this seems to cause the image to download to your device (but will still not cause it to be displayed on the page).

If I link to an image from another source, it DOES display:

<img src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Aperiodisk-v%C3%A4xelstorhet.svg" height="300" />

Why is it that I can display images from other sites, but cannot display them from my Azure CDN Blob Storage, even though these images are publicly accessible?

Ivan Glasenberg
  • 29,865
  • 2
  • 44
  • 60
Michael Kossin
  • 342
  • 3
  • 14

2 Answers2

2

I suspect that you might need to set the content-type of the blob. By default it is application/octet-stream. See https://stackoverflow.com/a/50103396/2170938

Jeremy Meng
  • 420
  • 1
  • 4
  • 12
  • Thank you. This was indeed the issueand now that I know this is the issue I was able to set this property in my code: `if (isSVG) { buffer = Encoding.UTF8.GetBytes(file);//SVGs are stored as plaintext. var fileContent = new ByteArrayContent(buffer); fileContent.Headers.ContentType = MediaTypeHeaderValue.Parse("image/svg+xml"); form.Add(fileContent, "image", fileName); await Http.PostAsync("api/HttpStreamReceiver", form); } ` – Michael Kossin Dec 02 '20 at 19:43
2

Please follow the steps below:

Go to azure portal -> your storage account -> in the left blade, click Storage Explorer (preview) -> then find the .svg image -> right click it and select Properties -> in the Blob Properties page, check the ContentType: if it's not image/svg+xml, please set it as image/svg+xml, then click Save button.

Here is a screenshot of the steps:

enter image description here

By the way, you can also use the Azure Storage Explorer to do that.

Ivan Glasenberg
  • 29,865
  • 2
  • 44
  • 60
  • Thank you. This does get the image to display, and now that I know this is the issue I was able to set this property in my code: ` if (isSVG) { buffer = Encoding.UTF8.GetBytes(file);//SVGs are stored as plaintext. var fileContent = new ByteArrayContent(buffer); fileContent.Headers.ContentType = MediaTypeHeaderValue.Parse("image/svg+xml"); form.Add(fileContent, "image", fileName); await Http.PostAsync("api/HttpStreamReceiver", form); }` – Michael Kossin Dec 02 '20 at 19:42