Imageresizer across multiple containers in azure storage

Question

Im uploading images to azure blob storage in a project. For logic reason I'm creating a new container for each upload, to group the content. This park works fine. Now I'm trying to setup ImageResizer to enable resizing :) and som other stuff. In all the examples they point to a container as the endpoint, but in my case I have multiple dynamic container, so this is not an option. My question is if someone knows if it should work in my case or if I need to rethink something about the way I store images.

Answer 1

According to your requirement, you could try to leverage AzureReader2 to work with Azure blobs, in order to dynamic resize your images from Azure Blob. Since you have miltiple dynamic containers, you could follow the steps below to configure AzureReader2:

Install Package via NuGet

• ImageResizer.WebConfig

• ImageResizer.Plugins.AzureReader2

Web.config

<configSections>
    <section name="resizer" type="ImageResizer.ResizerSection" requirePermission="false" />
</configSections>

<resizer>
    <plugins>
      <add name="MvcRoutingShim" />
      <add name="AzureReader2"
           connectionString="{your-storage-connectionstring}"
           prefix="~/cloud/" />
    </plugins>
</resizer>

<system.web>
    <httpModules>
      <add name="ImageResizingModule" type="ImageResizer.InterceptModule" />
    </httpModules>
</system.web>

<system.webServer>
    <modules>
      <add name="ImageResizingModule" type="ImageResizer.InterceptModule" />
    </modules>
</system.webServer>

Result

Here is my test, you could refer to it.

1.Upload images to my Azure Blob

https://brucechen.blob.core.windows.net/images01/test.jpg

https://brucechen.blob.core.windows.net/images01/landscape/test.jpg

https://brucechen.blob.core.windows.net/images02/test.jpg

2.Browser images in my web site as follows:

http://bruce-chen.azurewebsites.net/cloud/images01/test.jpg?width=400

http://bruce-chen.azurewebsites.net/cloud/images01/landscape/test.jpg?width=400

http://bruce-chen.azurewebsites.net/cloud/images02/test.jpg?width=400

Note: your images links should look like:

http(s)://<host-name>:<port>/<prefix-you-configured>/<blob-container-name>/<blob-file-name>?width=200&height=200

Additionally, for pre-resizing your images via ImageResizer, you could follow the answer in this thread. Also, there is anther similar library called Simple.ImageResizer which is free, you could refer to it.