CODEWITHSUNDEEP
blazorblazor-server-side
Andrew Corrigan
Andrew Corrigan

Reputation: 1057

How to display an image in a blazor page if the image doesn't have a file extension?

I can't seem to find something that relates to my specific scenario - I'm aware of how to display an image under normal circumstances. However, due to the nature of the system I'm working on, a lot of the data is sensitive in nature (including images) so I anonify the files in storage (stripping the filename and extension to be stored in the database and mapped to the file on download).

Since the files are anonified - throwing the storage path at the img tag results in the generic icon (presumably due to the lack of a file extension). Is there a way of masking the mapping over the storage path to make it work, or do I need to set up some form of webservice that delivers the image as an inline response?

Upvotes: 0

Views: 922

Answers (2)

Kyle Cintron
Kyle Cintron

Reputation: 366

In startup you can add this to make it work:

 app.UseStaticFiles(new StaticFileOptions
 {
   DefaultContentType = "image/gif"
 });

I think this will try to make all files without extensions an image?

The good thing is you can lock it to a certain folder using the FileProvider:

 app.UseStaticFiles(new StaticFileOptions
 {
   DefaultContentType = "image/gif",
   FileProvider = new 
     PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), 
     "wwwroot/images"))
        });

This example will only allow those files without extensions in the wwwroot/images to be read as type image.

If you don't want to do this you can do these things instead:

You can use something like this:

<img src="data:image/gif;base64,@Convert.ToBase64String(File.ReadAllBytes("wwwroot/images/contact"))">

There may be some problems (in the comments) with this though.

There is also this solution but I believe the one above to be better.

Upvotes: 1

Raven
Raven

Reputation: 2257

You should be able to display an image without bothering with the file extension. The file extension just makes it faster for the browser to display the file, however in the event that it doesn't have an extension, the browser will display the file by guessing or looking at its MIME type.

So just make sure that your web server (where the image comes from) is providing the right MIME type when the img object is requested.

https://developer.mozilla.org/en-US/docs/Learn/Server-side/Configuring_server_MIME_types

Upvotes: 0

Related Questions