SVG - Just return the original file

[rosrosros]

Case

Using ImageSharp.Web

We can server jpg images like this:

http://example.com/img/pic1.jpg?width=10

SVG

I would like to request SVG images on the same path like this:

http://example.com/img/logo.svg

This will result in a 404 response 😔

How do I configure ImageSharp just to bypass all logic and retur the original SVG file?

[JimBobSquarePants]

That shouldn’t happen. Did you register the middleware after the static file middleware or something?

[rosrosros]

Please note that the base path "http://example.com/img/" is the same for both jpg and svg files.

Otherwise it's a quite basic setup:

WebApplicationBuilder builder = WebApplication.CreateBuilder(args);

builder.Host
    .ConfigureAppConfiguration((context, configuration) =>
    {
        configuration
            .AddEnvironmentVariables()
            .Build();
    });

builder.Services.AddImageSharp()

    // Add source blob container
    .RemoveProvider<PhysicalFileSystemProvider>()
    .Configure<AzureBlobStorageImageProviderOptions>(options =>
    {
        options.BlobContainers.Add(new AzureBlobContainerClientOptions
        {
            ConnectionString =...,
            ContainerName = ...
        });
    })
    .AddProvider<AzureBlobStorageImageProvider>()

    // Add caching blob container
    .Configure<AzureBlobStorageCacheOptions>(options =>
    {
        options.ConnectionString = ...;
        options.ContainerName = ...;
        AzureBlobStorageCache.CreateIfNotExists(options, PublicAccessType.None);
    })
    .SetCache<AzureBlobStorageCache>();

WebApplication app = builder.Build();
app.UseImageSharp();
app.Run();

[JimBobSquarePants]

I don’t see app.UseStaticFiles() anywhere in that setup.

[rosrosros]

Thanks for the swift reply :-)

Both cases below produces 404 for http://example.com/img/logo.svg

WebApplication app = builder.Build();
app.UseDefaultFiles();
app.UseImageSharp();
app.UseStaticFiles();
app.Run();

WebApplication app = builder.Build();
app.UseStaticFiles();
app.UseImageSharp();
app.Run();

How is this ment to work?
Should I configure ImageSharp to also handle SVG files?

[tocsoft]

@JimBobSquarePants I would have to guess that the svg file is stored in blob storage and @rosrosros is hoping ImageSharp.Web will transparent serve files it can't process.

@rosrosros The way ImageSharp.Web is currently architected is that it will attempt to intercept/serve up files it can process only, if it can't process the file it lets the request continue onto other middleware processors to handle. As we don't support processing svg files then the ImageShjarp.Web middleware end up just ignoring the request entirely and assumes you have other handlers setup to cope with the request. So to handle this you will have to add a custom middleware/endpoint that can serve the files from blob storage yourself if ImageSharp fails to handle the request.

[rosrosros]

Thanks for pitching in @tocsoft
You are right - the svg files are in the same blob storage.
Your explanation on how ImageSharp i architected make perfect sence.

I'm wondering whether it would be preferable for me to write a custom "component" for ImageSharp that will read the SVG file and just serve the original file in the same way a jpg file is handled when no query string parameters are present.

Got any recommendations or pointers to share?

[JimBobSquarePants]

Theoretically yeah.... You could inherit AzureBlobStorageImageProvider and override IsValidRequest(HttpContext context).

I would always recommend rolling your own middleware to handle non-supported file formats though.

[rosrosros]

Thanks you both - hacking ImageSharp to our needs seems a bad way to go.
We will handle SVG files in another way