Try our conversational search powered by Generative AI!

ImageProcessor Help Request

Vote:
 

Hi Everyone,

I'm trying to take to take Vincent Baaij's ImageProcessor.Web.Episerver for a test drive, but I'm failing hard trying to get it to work. I've been trying for a couple of days now and I'm not sure what else to try.

The goal is to actually use the Azure version as we're running in DXC, but i've tried this and the local version in our codebase to no avail.

I had done little more than install the package and build to get:

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

Not sure where to start or what info to provide here so I'll start with the exception being thrown:

Exception thrown: 'System.NullReferenceException' in ImageProcessor.Web.Episerver.Azure.dll

The stacktrace shows the following:

at ImageProcessor.Web.Episerver.Azure.AzureBlobCache..ctor(String requestPath, String fullPath, String querystring)

These are the packages I have installed:

<package id="ImageProcessor" version="2.6.2.25" targetFramework="net461" />
<package id="ImageProcessor.Plugins.WebP" version="1.1.0" targetFramework="net461" />
<package id="ImageProcessor.Web" version="4.9.3.25" targetFramework="net461" />
<package id="ImageProcessor.Web.Config" version="2.4.1.19" targetFramework="net461" />
<package id="ImageProcessor.Web.Episerver" version="5.0.0.40599" targetFramework="net461" />
<package id="ImageProcessor.Web.Episerver.Azure" version="5.1.0.38549" targetFramework="net461" />

The web.config seems to have the all the entries it needs (pointers to the config files, imageprocessormodule etc).

I can successfully use something like:

PictureUtils.GetPictureData(Url.ContentUrl(Model.Image), ImageTypes.HeroImage, true);

to return a url like:

http://localhost:49945/siteassets/images/hero-banners/advanced_hero_reimagine_your_business_no_text_v001.jpg?width=1280&mode=crop&heightratio=0.5625&quality=80

but any image I attempt to GET that has the query string appended to it results in a 500 error. Remove the ?... and the image is retrieved correctly.

Any thoughts as to where to start?

Alex

#200019
Dec 21, 2018 11:50
Vote:
 

Hi Alex,

Did you install ImageProcessor module for Azure version in your local machine, right? So did you config blob storage provider and connection string for the default blob provider? You can see what needed configuration for Azure cache in this current git source for image processor package https://github.com/vnbaaij/ImageProcessor.Web.Episerver/blob/master/src/ImageProcessor.Web.Episerver.Azure/AzureBlobCache.cs

 public AzureBlobCache(string requestPath, string fullPath, string querystring)
            : base(requestPath, fullPath, querystring)
        {
            // Get the name of the configured blob provider
            string providerName = EPiServerFrameworkSection.Instance.Blob.DefaultProvider;


            if (rootContainer == null)
            {
                // Get the name of the connection string from there
                string connectionStringName = EPiServerFrameworkSection.Instance.Blob.Providers[providerName].Parameters["connectionStringName"];

                // Retrieve storage account from connection string.
                CloudStorageAccount cloudCachedStorageAccount = CloudStorageAccount.Parse(ConfigurationManager.ConnectionStrings[connectionStringName].ConnectionString);
                // Create the blob client.
                CloudBlobClient cloudBlobClient = cloudCachedStorageAccount.CreateCloudBlobClient();


                // Retrieve reference to the container. Container is already created as part of the initialization process for the BlobProvider
                rootContainer = cloudBlobClient.GetContainerReference(EPiServerFrameworkSection.Instance.Blob.Providers[providerName].Parameters["container"]);
            }

            //cachedCdnRoot = Settings.ContainsKey("CachedCDNRoot")
            //                         ? Settings["CachedCDNRoot"]
            //                         : rootContainer.Uri.ToString().TrimEnd(rootContainer.Name.ToCharArray());

            if (Settings.ContainsKey("CDNTimeout"))
            {
                int.TryParse(Settings["CDNTimeout"], out int t);
                timeout = t;
            }

            // This setting was added to facilitate streaming of the blob resource directly instead of a redirect. This is beneficial for CDN purposes
            // but caution should be taken if not used with a CDN as it will add quite a bit of overhead to the site.
            // See: https://github.com/JimBobSquarePants/ImageProcessor/issues/161
            streamCachedImage = Settings.ContainsKey("StreamCachedImage") && Settings["StreamCachedImage"].ToLower() == "true";
        }
#200025
Edited, Dec 24, 2018 3:48
Vote:
 

Hi Alex,

Did you get any further with this? If not, let me know. I'm pretty sure we can get to a working situation.

#200268
Jan 08, 2019 9:26
Vote:
 

This code doesn't work..Will be obliged if u provide further code than this too.Regards https://mykfcexperience.website/

#201637
Edited, Feb 26, 2019 6:48
Vote:
 

Hi Vincent,

I didn't get any further unfortunately. I played around with Binh's code but couldn't get that working either. 

Any advice?

Thanks :) 

#201750
Mar 01, 2019 10:10
Vote:
 

Hi All,

I'm back trying to get this to work again, but I've not been able to progress any further.

I've tried make changes to the config files, but it's just guess work. - what changes do I need to make to get this running locally and on a multi-site DXC once we deploy?

The errors are still the same:

2019-10-03 08:20:39,847 [21] ERROR EPiServer.Global: Unhandled exception in ASP.NET
System.NullReferenceException: Object reference not set to an instance of an object.
   at ImageProcessor.Web.Episerver.Azure.AzureBlobCache..ctor(String requestPath, String fullPath, String querystring)
   at lambda_method(Closure , String , String , String )
   at ImageProcessor.Web.Extensions.TypeInitializationExtensions.InstanceCreationFactory`3.CreateInstanceOf(Type type, TArg1 arg1, TArg2 arg2, TArg3 arg3)
   at ImageProcessor.Web.Extensions.TypeInitializationExtensions.GetInstance[TArg1,TArg2,TArg3](Type type, TArg1 argument1, TArg2 argument2, TArg3 argument3)
   at ImageProcessor.Web.HttpModules.ImageProcessingModule.<ProcessImageAsync>d__31.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Web.TaskAsyncHelper.EndTask(IAsyncResult ar)
   at System.Web.HttpApplication.AsyncEventExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute()
   at System.Web.HttpApplication.ExecuteStepImpl(IExecutionStep step)
   at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)

There appear to be three services in the security.config - which one do I need for which environment? I presume that I need one configured for my local env and then transform it when we deploy to DXC. is that right?

Kind regards,

Alex

#207781
Oct 03, 2019 9:26
Vote:
 

I've managed to get this working locally! Basically by paying more attention to the example configs on Github. So I'm hoping that if I've setup my transforms properly then this will continue to work once we deploy to DXC... we shall see :)

#207794
Oct 03, 2019 13:10
Vote:
 

Hi Alex, hopefully you have gotten this to work already but here are few reminders:

If you want to use this package but don't want to store the cached images to the same location with the original image then

  • in local development you can used the default DiskCache
  • for Azure you can use the package https://www.nuget.org/packages/ImageProcessor.Web.Plugins.AzureBlobCache/
    • in DXC Service I believe you need to ask them to create you a new container (the plugin tries to create the configured container if it doesn't exist but I'm not sure do you have/get the required access keys in DXC)

#207841
Oct 06, 2019 10:19
Vote:
 

Hi Antti,

Many thanks for that information. I'm yet to deploy my code to DXC and to therefore test the transformed config, but everything is working locally and is awesome.

I'll definitely have a look at the AzureBlobCache plugin as keeping the produced images cached elsewhere sounds like a nice and clean approach, thank you

Alex

#207852
Oct 07, 2019 10:19
Vote:
 

Hi Alex,

Did the plugin work for you? Or did you find another approach for this issue?

Thank you

Salmin

#217835
Mar 02, 2020 10:30
Vote:
 

Hi Salmin,

I've yet to look into the AzureBlobCache plugin, but ImageProcessor itself is running on our live site and we're very happy with it!

Alex

#217836
Mar 02, 2020 10:47
Vote:
 

Our problem might not be the same as yours, but maybe you have came across it since your solution is working on DXC.

Our codebase works fine locally and on integration, but when deploying to preproduction we get errors with loading images through the ImageProcessor:

Removing the query-params will make the image load instantly, but having them on gives errors and this is the result (se image):

#217853
Mar 02, 2020 12:31
Vote:
 

What got it working for me was understanding how the config files worked for local vs production and applying the right config for the right environment.

Can you share your config files? Although I didn't have to touch processing.config - i did need to strip out the unwanted config from cache.config and security.config

#217866
Mar 02, 2020 13:48
Vote:
 

Hi,

Thank you for your time. Here's are config

https://pastebin.com/iGn3F62t

#217869
Mar 02, 2020 14:29
Vote:
 

The log stream says:

2020-03-02T14:34:20,Error,1bcccf,637187564609804321,0,12632,351,"EPiServer.Global : Unhandled exception in ASP.NET
System.Web.HttpException (0x80004005): Server cannot append header after HTTP headers have been sent.
   at System.Web.HttpResponse.AppendHeader(String name, String value)
   at ImageProcessor.Web.HttpModules.ImageProcessingModule.SetHeaders(HttpContext context, String responseType, String[] dependencyPaths, Int32 maxDays, Nullable`1 statusCode)
   at ImageProcessor.Web.HttpModules.ImageProcessingModule.SetHeaders(HttpContext context, Int32 maxDays)
   at ImageProcessor.Web.HttpModules.ImageProcessingModule.PostReleaseRequestState(Object sender, EventArgs e)
   at System.Web.HttpApplication.SyncEventExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute()
   at System.Web.HttpApplication.<>c__DisplayClass285_0.b__0()
   at System.Web.HttpApplication.ExecuteStepImpl(IExecutionStep step)
   at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)",
#217870
Mar 02, 2020 14:35
Vote:
 

Can you share your cache.config and security.config files as well?

This thread suggests a setting in the security.config as a potential culprit.

#217871
Mar 02, 2020 14:51
Vote:
 

Here they are:

<imageProcessor>
<security>
<services>
<service name="EpiserverImageService" type="ImageProcessor.Web.Episerver.ImageService, ImageProcessor.Web.Episerver">
<settings>
<setting key="OnAzure" value="true"/>
</settings>
</service>
</services>
</security>
<caching currentCache="EpiserverAzureBlobCache">
<caches>
<cache name="EpiserverAzureBlobCache" type="ImageProcessor.Web.Episerver.Azure.AzureBlobCache, ImageProcessor.Web.Episerver.Azure" maxDays="365">
<settings>
<setting key="StreamCachedImage" value="true"/>
<setting key="CDNTimeout" value="1000"/>
</settings>
</cache>
</caches>
</caching>
<processing configSource="config\imageprocessor\processing.config"/>
</imageProcessor>

As you can se, we have added: <setting key="OnAzure" value="true"/>

#217872
Mar 02, 2020 14:53
Vote:
 

I just noticed that our primary domain was set to *

So I tried switching it to the preprod domain, fixed the issue!

#217873
Edited, Mar 02, 2020 15:15
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.