Umbraco / Azure Blob Storage - Able to upload images & view in Umbraco, but getting 404 Errors on front-end

Question

I recently began integrating UmbracoFileSystemProviders.Azure from https://github.com/JimBobSquarePants/UmbracoFileSystemProviders.Azure and am able to do the following on my local machine & a dev environment...

1. I can log into Umbraco (v7.3.1/a1.0.5780.28249), upload an image & have it appear in the appropriate container on our Azure blob storage
2. I can view images at their corresponding azure address (i.e. "https://azureaccount.blob.core.windows.net/media-stage/9999/file-name.png")
3. I can view images within Umbraco's backend (i.e. "http://localhost:99999/umbraco/backoffice/UmbracoApi/Images/GetBigThumbnail?originalImagePath=%2Fmedia%2F9999%2Ffile-name.png")

However, I get a 404 error when I try to view images on the front-end (i.e. "http://www.sitedomain.com/media/9999/file-name.png"). I think this is because the site is still trying to find the front-end image within the site rather than in Azure (based on the fact that creating/removing a matching directory & image at the appropriate relative location causes the image to load or yield a 404). This issue is consistent across multiple browsers & image uploads (whether I upload through Umbraco or through Microsoft Azure Storage Explorer). Does anyone have any ideas how I might be able to resolve it?

The following are all of the files/code snippets I'm using that I think might be relevant to the issue (with client-specific data swapped out in favor of generic data for security)...

Relevant section of Config/FileSystemProviders.config:

    <Provider alias="media" type="Our.Umbraco.FileSystemProviders.Azure.AzureBlobFileSystem, Our.Umbraco.FileSystemProviders.Azure">    
      <Parameters>  
        <add key="alias" value="media"/>  
      </Parameters>  
    </Provider>

Relevant sections of Web.config:

    <appSettings>
      <!--other data here-->
      <add key="AzureBlobFileSystem.ConnectionString:media" value="DefaultEndpointsProtocol=https;AccountName=azureaccount;AccountKey=aBcDeFgHiJkLmNoPqRsTuVwXyZ==;EndpointSuffix=core.windows.net" />
      <add key="AzureBlobFileSystem.ContainerName:media" value="media-stage" />
      <add key="AzureBlobFileSystem.RootUrl:media" value="https://azureaccount.blob.core.windows.net/" />
      <add key="AzureBlobFileSystem.MaxDays:media" value="365" />
      <add key="AzureBlobFileSystem.UseDefaultRoute:media" value="true" />
      <add key="AzureBlobFileSystem.UsePrivateContainer:media" value="false" />
      <!--other data here-->
    </appSettings>

    <location path="Media">
      <system.webServer>
        <handlers>
          <remove name="StaticFileHandler" />
          <add name="StaticFileHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />
        </handlers>
      </system.webServer>
    </location>

A few additional notes for the troubleshooting process...

I've seen a few similar issues posted on GitHub (& closed out), but I believe my situation to be unique because...

1. I am not seeing configuration errors when I view the project or umbraco backend (as with https://github.com/JimBobSquarePants/UmbracoFileSystemProviders.Azure/issues/103)
2. My Umbraco is version 7.3.1 (rather than 7.5+, like https://github.com/JimBobSquarePants/UmbracoFileSystemProviders.Azure/issues/57)
3. Commenting out the image processor in the web config does not solve the issue (as with https://github.com/JimBobSquarePants/UmbracoFileSystemProviders.Azure/issues/27)

I've also tried forgoing the web.config approach & using the following within Config/FileSystemProviders.config (again, client-specific data has been replaced with generalized stuff), but still had the same problem...

    <Provider alias="media" type="Our.Umbraco.FileSystemProviders.Azure.AzureBlobFileSystem, Our.Umbraco.FileSystemProviders.Azure">
      <Parameters>
        <add key="containerName" value="media-stage" />
        <add key="rootUrl" value="https://azureaccount.blob.core.windows.net/" />
        <add key="connectionString" value="DefaultEndpointsProtocol=https;AccountName=azureaccount;AccountKey=aBcDeFgHiJkLmNoPqRsTuVwXyZ==;EndpointSuffix=core.windows.net"/>
        <add key="maxDays" value="365" />
        <add key="useDefaultRoute" value="true" />
        <add key="usePrivateContainer" value="false" />
    </Parameters>

Thanks in advance for any assistance!

Answer 1

I found that I needed to disable the Virtual Path Provider otherwise the URLs generated were always relative (of the form /media/nnnnn/filename.jpg). Hence I added this to web.config AppSettings

<add key="AzureBlobFileSystem.DisableVirtualPathProvider" value="true" />

see https://github.com/JimBobSquarePants/UmbracoFileSystemProviders.Azure.

This was with Umbraco version 7.7.7.