Image in the media not displaying if there are no querystrings

[jt3432]

After installing and configuring this file system provider I am getting this error for images that are not processed by ImageProcessor:

If I simply append "?rnd=1" to the end of image url the image loads with out issue. I understand, at a high level what is happening here but do not know how to configure the provider to not look for the image in the cache if there is no valid ImageProcessor querystrings on the image url.

I tried to set the "interceptAllRequests" attribute in the processing.config file to false and then the cropped images did not load properly. I have tried upgrading ImageProcessor, reinstalling, multiple config options with no luck. I either can have ImageProcessor work on image and not load non-processed images or ImageProcessor does not work and image are loaded, but not both.

I would be ok with appending the "rnd" querystring to the end of all images but that only works for the front end. Images are broken in the back office of Umbraco if I have ImageProcessor working. If I uninstall UmbracoFileSystemProvider.Azure and move the media directory back to the local file system all image load and are processed as expected. What am I missing here?

[JimBobSquarePants]

What am I missing here?

Version numbers... 😉

Could you share your config and the version numbers of both the provider and imageprocessor.web please.

Also, Are you using the CloudImageService as per the readme?

[jt3432]

Umbraco version 7.5.8. For ImageProcessor.Web I have tried versions 4.8.0 & 4.8.1. For UmbracoFileSystemProvider.Azure I have the latest version 0.5.7-beta. Yes I am using the CloudImageService. This was working in the past but now I have multiple projects that are having this issue. Images are being pulled from blog storage but ImageProcessor is handling all image requests and looking for the image in the cache. If there are no query strings added to the image url the image is not added to the cache and I get the error.

I have this in the web.config:

<sectionGroup name="imageProcessor">
      <section name="security" requirePermission="false" type="ImageProcessor.Web.Configuration.ImageSecuritySection, ImageProcessor.Web" />
      <section name="processing" requirePermission="false" type="ImageProcessor.Web.Configuration.ImageProcessingSection, ImageProcessor.Web" />
      <section name="caching" requirePermission="false" type="ImageProcessor.Web.Configuration.ImageCacheSection, ImageProcessor.Web" />
    </sectionGroup>

 <imageProcessor>
    <security configSource="config\imageprocessor\security.config" />
    <caching configSource="config\imageprocessor\cache.config" />
    <processing configSource="config\imageprocessor\processing.config" />
  </imageProcessor>

FileSystemProvider.config

<?xml version="1.0"?>
<FileSystemProviders>
  <Provider alias="media" type="Our.Umbraco.FileSystemProviders.Azure.AzureBlobFileSystem, Our.Umbraco.FileSystemProviders.Azure">
  	<Parameters>
  		<add key="containerName" value="media"/>
  		<add key="rootUrl" value="http://mycontainer.blob.core.windows.net/"/>
  		<add key="connectionString" value="DefaultEndpointsProtocol=https;AccountName=mycontainer;AccountKey={mykey}"/>
  		<add key="maxDays" value="365"/>
  		<add key="useDefaultRoute" value="true"/>
  	</Parameters>
  </Provider>   
</FileSystemProviders>

cache.config

<?xml version="1.0" encoding="utf-8"?>
<caching currentCache="DiskCache">
  <caches>
    <cache name="DiskCache" type="ImageProcessor.Web.Caching.DiskCache, ImageProcessor.Web" maxDays="365" browserMaxDays="7">
      <settings>
        <setting key="VirtualCachePath" value="~/app_data/cache" />
      </settings>
    </cache>
  </caches>
</caching>

processing.config

<?xml version="1.0" encoding="utf-8"?>
<processing preserveExifMetaData="true" fixGamma="false" interceptAllRequests="true" allowCacheBuster="true">
  <presets>
  </presets>
  <plugins>
    <plugin name="Alpha" type="ImageProcessor.Web.Processors.Alpha, ImageProcessor.Web"/>
    <plugin name="AutoRotate" type="ImageProcessor.Web.Processors.AutoRotate, ImageProcessor.Web" enabled="true"/>
    <plugin name="BackgroundColor" type="ImageProcessor.Web.Processors.BackgroundColor, ImageProcessor.Web" enabled="true"/>
    <plugin name="Brightness" type="ImageProcessor.Web.Processors.Brightness, ImageProcessor.Web"/>
    <plugin name="Contrast" type="ImageProcessor.Web.Processors.Contrast, ImageProcessor.Web"/>
    <plugin name="Crop" type="ImageProcessor.Web.Processors.Crop, ImageProcessor.Web" enabled="true"/>
    <plugin name="DetectEdges" type="ImageProcessor.Web.Processors.DetectEdges, ImageProcessor.Web"/>
    <plugin name="EntropyCrop" type="ImageProcessor.Web.Processors.EntropyCrop, ImageProcessor.Web"/>
    <plugin name="Filter" type="ImageProcessor.Web.Processors.Filter, ImageProcessor.Web"/>
    <plugin name="Flip" type="ImageProcessor.Web.Processors.Flip, ImageProcessor.Web"/>
    <plugin name="Format" type="ImageProcessor.Web.Processors.Format, ImageProcessor.Web" enabled="true"/>
    <plugin name="GaussianBlur" type="ImageProcessor.Web.Processors.GaussianBlur, ImageProcessor.Web">
      <settings>
        <setting key="MaxSize" value="22"/>
        <setting key="MaxSigma" value="5.1"/>
        <setting key="MaxThreshold" value="100"/>
      </settings>
    </plugin>
    <plugin name="GaussianSharpen" type="ImageProcessor.Web.Processors.GaussianSharpen, ImageProcessor.Web">
      <settings>
        <setting key="MaxSize" value="22"/>
        <setting key="MaxSigma" value="5.1"/>
        <setting key="MaxThreshold" value="100"/>
      </settings>
    </plugin>
    <plugin name="Halftone" type="ImageProcessor.Web.Processors.Halftone, ImageProcessor.Web"/>
    <plugin name="Hue" type="ImageProcessor.Web.Processors.Hue, ImageProcessor.Web"/>
    <plugin name="Mask" type="ImageProcessor.Web.Processors.Mask, ImageProcessor.Web">
      <settings>
        <setting key="VirtualPath" value="~/images/imageprocessor/mask/"/>
      </settings>
    </plugin>
    <plugin name="Meta" type="ImageProcessor.Web.Processors.Meta, ImageProcessor.Web"/>
    <plugin name="Overlay" type="ImageProcessor.Web.Processors.Overlay, ImageProcessor.Web">
      <settings>
        <setting key="VirtualPath" value="~/images/imageprocessor/overlay/"/>
      </settings>
    </plugin>
    <plugin name="Pixelate" type="ImageProcessor.Web.Processors.Pixelate, ImageProcessor.Web"/>
    <plugin name="Quality" type="ImageProcessor.Web.Processors.Quality, ImageProcessor.Web" enabled="true"/>
    <plugin name="ReplaceColor" type="ImageProcessor.Web.Processors.ReplaceColor, ImageProcessor.Web"/>
    <plugin name="Resize" type="ImageProcessor.Web.Processors.Resize, ImageProcessor.Web" enabled="true">
      <settings>
        <setting key="MaxWidth" value="5000"/>
        <setting key="MaxHeight" value="5000"/>
      </settings>
    </plugin>
    <plugin name="Rotate" type="ImageProcessor.Web.Processors.Rotate, ImageProcessor.Web"/>
    <plugin name="RotateBounded" type="ImageProcessor.Web.Processors.RotateBounded, ImageProcessor.Web"/>
    <plugin name="RoundedCorners" type="ImageProcessor.Web.Processors.RoundedCorners, ImageProcessor.Web"/>
    <plugin name="Saturation" type="ImageProcessor.Web.Processors.Saturation, ImageProcessor.Web"/>
    <plugin name="Tint" type="ImageProcessor.Web.Processors.Tint, ImageProcessor.Web"/>
    <plugin name="Vignette" type="ImageProcessor.Web.Processors.Vignette, ImageProcessor.Web"/>
    <plugin name="Watermark" type="ImageProcessor.Web.Processors.Watermark, ImageProcessor.Web"/>
  </plugins>
</processing>

security.config

<?xml version="1.0" encoding="utf-8"?>
<security>
  <services>
    <service prefix="media/" name="CloudImageService" type="ImageProcessor.Web.Services.CloudImageService, ImageProcessor.Web">
      <settings>
        <setting key="Container" value="media" />
        <setting key="MaxBytes" value="16777216" />
        <setting key="Timeout" value="30000" />
        <setting key="Host" value="https://mycontainer.blob.core.windows.net/media" />
      </settings>
    </service>
    <service prefix="remote.axd" name="RemoteImageService" type="ImageProcessor.Web.Services.RemoteImageService, ImageProcessor.Web">
      <settings>
        <setting key="MaxBytes" value="4194304" />
        <setting key="Timeout" value="3000" />
        <setting key="Protocol" value="http" />
      </settings>
      <whitelist>
      </whitelist>
    </service>
  </services>
</security>

[jt3432]

@JimBobSquarePants any thoughts to why this might be happening. I am now seeing this in multiple project.

[JimBobSquarePants]

@jt3432 Do you have any errors in your Umbraco logs? IP.Web will be logging any issues.

What happens when you turn off interceptAllRequests="true" (btw don't recommend that).

[JimBobSquarePants]

No one else has reported this so it's tricky to debug. Umbraco use all the latest versions for their cloud offering without any issue.

[jt3432]

Yes I have tried setting interceptAllRequests to false as indicated in my first post and that did not work. There is nothing in the logs for IP.Web or ImageProcessor.

All requests seem to be handled by ImageProcessor even when they should not. I can get images to either pull directly from the blob or have images processed by ImageProcessor but not both. I am installing via nuget if that help. This was working and it is only recently stopped working in recent project that we have upgraded to use blob storage. I have no issues accessing the image in the blob.

• Does the cache for the images have to be in an Azure CDN?
• Are there any naming gotchas that I should know?
• Is there a way to tell ImageProcessor to ignore image that have no query strings?
• Do I need to have all ImageProcessor config file referenced in the web.config?
• Are there any entries in the web.config that I should remove or add, i.e. location nodes?

[JimBobSquarePants]

Odd that there's no logs. ImageProcessor.Web will always log if it cannot find an image and Umbraco 7.5.8 has an extension that picks up those logs.

All requests seem to be handled by ImageProcessor even when they should not

ImageProcessor.Web doesn't do this. By default it will only intercept and process a request if it has a valid querystring. You can see the final check here.

https://github.com/JimBobSquarePants/ImageProcessor/blob/19be0251d0faea0bfb1ad5dfc0aac9d9d1d116fe/src/ImageProcessor.Web/HttpModules/ImageProcessingModule.cs#L527

I've just tested this within the test website within the imageprocessor solution and interceptAllRequests definitely defaults to false and responds according to changes in configuration.

I have, however identified the cause of the exception that you are seeing when all images are being intercepted and will fix that.

I tried to set the "interceptAllRequests" attribute in the processing.config file to false and then the cropped images did not load properly.

What does this actually mean? Did you get a 404? Another exception? Was something cached?

• Does the cache for the images have to be in an Azure CDN?
  No the cache is independent though if you are using the DiskCache I would recommend installing it outside of the web application.
• Are there any naming gotchas that I should know?
  None that I know of
• Is there a way to tell ImageProcessor to ignore image that have no query strings?
  Default behaviour already does this
• Do I need to have all ImageProcessor config file referenced in the web.config?
  The paths to the config files should be referenced via the config section if required. Other config files can be ignored as they fall back to embedded config if not included.
• Are there any entries in the web.config that I should remove or add, i.e. location nodes?
  No. Have you also ensured though that the static file handler is registered in the media folder so the VPP will work?

[jt3432]

Thank you very much for your help and the information. Just to clarify, the behavior that I am seeing is an either or outcome. If interceptAllRequests is set to true then an image without a valid ImageProcessor query string is returning a 500 error, "Value cannot be null. Parameter name: querystring" (error in the first post), which makes sense since there is no image in cache to lookup. If it is set to false the image is returned be all valid query strings are ignored and the image is return directly from the blog storage and not processed by ImageProcessor, which again makes sense.

Yes, the static file handler is registered in the web.config in the media directory per the documentation.

[jt3432]

After having a chance to review the ImageProcessor code a bit more I better understand what you are saying. If the ImageProcessor is intercepting all requests then this behavior I am seeing makes complete sense and would be expected. So, I guess the question is why does it appear that the ImageProcessor is intercepting all requests and not ignoring one that have no querystring? If I completely uninstall the Azure file system provider then everything works as expected, images without query strings are ignored by image processor and images with valid query strings are processed. Stab in the dark and this does not seem likely, but could this be an issue with order of operation?

[JimBobSquarePants]

@jt3432 I haven't forgotten about this. I've been doing some extensive testing to see whether I could replicate the issue.

Here's what I found so far. With the latest Umbraco, FileSystemProvider, and ImageProcessor I was unable to replicate the issue using the DiskCache. The images are requested, cached, and served correctly.

However when using the AzureBlobCache I found an issue with the Akamai CDN which is returning a 500 response yet also the correct url and headers when I was checking the url using a head request resulting in an empty response. This will be handled in the next release.

At present I simply cannot replicate your issue as it stands. The only thing I can suggest it to build from source and attach a debugger, That way you can track line-per-line and see exactly what is happening.

[jt3432]

Any chance you could post your config files so I can compare with mine. Also, if I were to put the cache into the blob, do I need to setup a CDN to go with the blob cache? I am going to do a clean Umbraco install and see it I can recreate the issue. I suspect that the issue may be a config issue with how I am setting up my Umbraco solutions, just not sure what it could be. I am not using many third party plugins, just Octopack and your file system provider, both installed via Nuget. I do put my custom code into a separate "Core" project but I just have the Umbraco core dll's install there again via Nuget. I will report back my findings. Again, thanks for the help.

[jt3432]

Well, it is working now. I upgraded ImageProcessor and ImageProcessor.Web and the file system provider to the latest. Also set interceptAllRequests="false" in the processing.config. I had tried interceptAllRequests="false" before upgrading and it did not resolve the issue so I am not sure what has changed. I am still testing.

[JimBobSquarePants]

Odd... it must be either a configuration thing or perhaps old dlls not getting cleaned out of the solution properly. I'm glad you have a working solution now anyway. I can imagine it has been very frustrating.

[garpunkal]

Did you find out what was causing this, I'm having the exact problem as well...

[garpunkal]

Just FYI, I fixed this by reinstalling the
ImageProcessor
imageProcessor.Web
ImageProcessor.Web.Plugins.AzureBlobCache