I am working on a Blazor Server App that also includes a minimal API that is used for several tasks including serving request for image files that are stored in a database instead of the file system.
Generally everything works fine. My only problem is that these images are never cached in the browser and downloaded any time when the according URLs are used in a page.
The route for the GET request is registered in Program.cs
app.MapGet("/_image/{filename}", async ([FromRoute] string filename, FileService fileService) => await fileService.GetImage(filename));
The GetFile method in the FileService looks like this:
public async Task<IResult> GetImage(string filename)
{
byte[] data = null;
if (!string.IsNullOrWhiteSpace(filename))
{
/* ... get data from database ... */
}
return data != null ? Results.File(data, "image/png", filename) : Results.NotFound();
}
So, whenever a a request to one of these files is included in an image tag (like <img src="/_image/test.png"/>), the image is shown. But whenever the page is opened, the image is downloaded again instead of using it from the browser cache.
So, how can i tell the browser to cache the image?
A second issue that i noticed: When I enter the URL for the image into the address field of the browser (like http://server.com/_image/test.png) the image is always directly downloaded into the download folder instead of shown in the browser window. This is at the moment not a problem for me, but just out of curiosity, what do i have to change that the image is shown?
UPDATE:
I solved both problems with some minor changes. I had to add the HttpContext which gives access to the response.
In Program.cs
app.MapGet("/_image/{filename}", async ([FromRoute] string filename, FileService fileService, HttpContext context) => await fileService.GetImage(filename, context));
and for the method retrieving the file and sending the response
public async Task<IResult> GetImage(string filename, HttpContext context)
{
byte[] data = null;
if (!string.IsNullOrWhiteSpace(filename))
{
/* ... get data from database ... */
if (data != null) {
context.Response.Headers.ContentDisposition = "inline";
context.Response.Headers.CacheControl = "max-age=180, public";
}
}
return data != null ? Results.File(data, "image/png", filename) : Results.NotFound();
}
Now it works perfectly.
