imageresizer

ImageResizer simply not resizing images

I have an ASP.NET MVC 3 project, and I installed the ImageResizer Mvc Web.Config package, which added all necessary components, and modified my Web.Config file for me.

I have the following code in my MVC View:

<div id="heroimage" class="slideshow">
    <div>[LEFT]</div
    <div>[RIGHT]</div>
    <div>[INDICATOR]</div>
    @foreach (ICMSElement oHeroImage in Model.Elements("HeroImage")){
        <img src="images/@oHeroImage.Value" />       
    }
</div>

<div id="image-strip" class="viewer">
    <div class="slider">
        <ul>
            @foreach (ICMSElement oHeroImage in Model.Elements("HeroImage")){
                <li><img src="images/@oHeroImage.Value?width=100&height=100"></li>
            }
        </ul>
    </div>
</div>

The images contained in the second div are not being resized. There is no css for the width and height that would be overriding the resizing.

In the troubleshooting page for the ImageResizer, it is stated that if an image cannot be resized, it could be one of the following causes:

You did not register the HttpModule properly in both places of your Web.config file.

(I used the NuGet package that modified the Web.Config for me)

You are using IIS 6 (or earlier), or IIS7 Classic Pipeline, and are not using the .jpg.ashx syntax, and you have not mapped all requests to the ASP.NET runtime.

(My IIS server is running IIS 7 in Integrated mode)

You are using ASP.NET MVC (and have conflicting routes), but do not have the MvcRoutingShim plugin installed.

(The MvcRoutingShim plugin is installed according to the debug page)

You are mistyping the querystring commands.

(I am not doing this in the code snippet above)

The original image is smaller than the size you are requesting, and you are not using &scale=both (The default behavior is to never upscale images, but this can be changed)

(The default image size in this case is 1280x800)

My Resizer.Debug output is here: https://gist.github.com/Thoth2020/11197160

My website is using a base tag in the Layout page, however it is not adjusting the src attribute of the img. For example, the page I am looking at renders this img tag:

<img src="images/00100010_1200_800_slideshow_03.jpg?width=100&height=100">

Which is the same as the snippet above with the Razor syntax interpreted.

So, I guess I am at a loss as to why this is not functioning correctly.

Solution

  • You have an existing controller or another HttpModule that is interfering with ImageResizer. One workaround is to use the fakeExtensions feature to avoid matching those routes. This makes your URLs look like image.jpg.ashx?width=400 instead of image.jpg?width=400.

    If your CMS abstracts away image storage, and does not implement VirtualPathProvider, you may need to implement an IVirtualImageProvider to bridge the gap between your CMS data layer and ImageResizer.

    Typically, however, you can use one of our existing storage plugins (SqlReader, S3Reader, VirtualFolder, RemoteReader) to access the data store directly instead.