Cannot get AzureBlobStorageImageProvider to work

[ajtatum]

I'm trying the middleware to cache images, and was able to successfully get local files cached to a "different-cache" folder, but when I try to get it to work with my Azure Blob Storage... it doesn't seem to work.

Here's my implementation:

services.AddImageSharp(
    options =>
    {
        // You only need to set the options you want to change here.
        options.Configuration = SixLabors.ImageSharp.Configuration.Default;
        options.MaxBrowserCacheDays = 7;
        options.MaxCacheDays = 30;
    })
    .SetRequestParser<QueryCollectionRequestParser>()
    .Configure<AzureBlobStorageImageProviderOptions>(options =>
    {
        options.BlobContainers.Add(new AzureBlobContainerClientOptions
        {
            ConnectionString = azureStorageConnection,
            ContainerName = "temp"
        });
    })
    .AddProvider<AzureBlobStorageImageProvider>()
    .AddProcessor<ResizeWebProcessor>()
    .AddProcessor<FormatWebProcessor>()
    .AddProcessor<BackgroundColorWebProcessor>();

Where "azureStorageConnection" is in the format of:

DefaultEndpointsProtocol=https;AccountName=storageaccount;AccountKey=accountKey;BlobEndpoint=https://storageaccount.blob.core.windows.net/;TableEndpoint=https://storageaccount.table.core.windows.net/;QueueEndpoint=https://storageaccount.queue.core.windows.net/;FileEndpoint=https://storageaccount.file.core.windows.net/

Then, if I try:

<img src="https://storageaccount.blob.core.windows.net/temp/image.jpg?height=150" title="test"/>

It returns the full sized image. So, I don't know what exactly I'm doing wrong and would love to get it to work correctly as it would be so extremely useful!

Any help would be greatly appreciated!

Thank you,
AJ

[JimBobSquarePants]

Hi @ajtatum

There's two issues with your current configuration but first I suggest we grab the latest version from MyGet as the registration API has been improved somewhat and is the same as the final release.

First install these specific versions:
(Note Nuget will detect that the version numbers are lower than the Nuget RC, this is due to invalid version number generation by the tool we previously used to generate version numbers. These are 15 builds ahead!)

https://www.myget.org/feed/sixlabors/package/nuget/SixLabors.ImageSharp.Web/1.0.0-rc.3.15
https://www.myget.org/feed/sixlabors/package/nuget/SixLabors.ImageSharp.Web.Providers.Azure/1.0.0-rc.3.15

Then you need to register your provider.

services.AddImageSharp(options =>
{
    options.BrowserMaxAge = TimeSpan.FromDays(7);
    options.CacheMaxAge = TimeSpan.FromDays(30);
})
.ClearProviders()
.Configure<AzureBlobStorageImageProviderOptions>(options =>
{
    options.BlobContainers.Add(new AzureBlobContainerClientOptions
    {
        ConnectionString = "YOUR_CONNECTION_STRING",
        ContainerName = "temp"
    });
})
.AddProvider<AzureBlobStorageImageProvider>()
.AddProvider<PhysicalFileSystemProvider>();

By default ImageSharp.Web will register the PhysicalFileSystemProvider which is a catch-all provider so you need to clear the provider list before registering the AzureBlobStorageImageProvider then the PhysicalFileSystemProvider. If you don't need the latter don't register it again and use your single provider. Everything else is already registered by default so you don't need to register them.

Finally requests are made in the following manner.

https://your-site.com/temp/image.jpg?height=150

Request urls should always be rooted at your site domain. By directing your request outside the domain you are bypassing the middleware.

I hope that all makes sense.

[ajtatum]

That did the trick! Awesome, super stoked. Just curious, if it possible to have both providers? When I tried adding the PhysicalFileSystemProvider, the Azure Provider stopped working (Chrome would report them as 404 not found).

Thanks,
AJ

[JimBobSquarePants]

Yep, read the above again. You have to clear the provider selection and register the AzureBlobStorageImageProvider before the PhysicalFileSystemProvider

[ajtatum]

Got it working, thank you! I have another question, but I'll post it in another thread.