Browsers act different on anchor with image on MVC3 Razor

Question

world! I have a odd thing with an "a" tag. The big idea is rendering something like this: <a href="/*Retrieve an original sized image from database*/"><img src="/*Retrieve an original sized image and resize to thumbnail*/"/> </a>.

This is what I need to implement some jQuery zooming image plugins. I have 2 methods - one simply gets image form DB, another makes a thumbnail.

The problem is different browser behavior to my actions: FF, Chrome, Opera shows an original image in another window (as expected). Safari offers to download a jpg file called "GetImageThumbnail" and IE offers to download unknown file called GetImageThumbnail (opens as jpeg image).

Here is anchor href text: "/Image/GetFullSizedImage?goodId=20" - same on all browsers.

This is helper in View: @Html.GetImageLinkWithInnerImage(Model.Id).

Here is a helper implementation(might be useful for folks who want to make anchors and images in helper methods:)

 public static MvcHtmlString GetImageLinkWithInnerImage(this HtmlHelper helper, int goodid)
   {
       var controller = helper.ViewContext.Controller as Controller;
       if (controller != null)
       {
           var urlHelper = controller.Url;
           var photoUrl = urlHelper.Action("GetFullSizedImage", "Image", new { goodId = goodid });
           var anchorBuilder = new TagBuilder("a");
           anchorBuilder.MergeAttribute("href", photoUrl + " ");
           var innerPhotoUrl = urlHelper.Action("GetImageThumbnail", "Image", new { goodId = goodid });
           var imgBuilder = new TagBuilder("img");
           imgBuilder.MergeAttribute("src", innerPhotoUrl);
           imgBuilder.MergeAttribute("alt", "Фото товара");
           anchorBuilder.InnerHtml = imgBuilder.ToString(TagRenderMode.SelfClosing);
           return MvcHtmlString.Create(anchorBuilder.ToString());
       }
       return null;
   }

And method retrieves image from DB:

 public FileContentResult GetFullSizedImage(int goodId)
    {
        byte[] imageData = _db.GetGood(goodId).Image;

        if (imageData != null)
        {
            int imageWidth;
            int imageHeight;
            var imageFile = GetImageFromBytes(imageData, out imageWidth, out imageHeight);

            return ImageReadyFileContentResult(imageWidth, imageFile, imageHeight);
        }

        return NoPhotoFileContentResult();
    }

This is an HTML output:

<a href="/Image/GetFullSizedImage?goodId=20 "><img alt="Фото товара" src="/Image/GetImageThumbnail?goodId=20" /></a>

What am I doing wrong?

Answer 1

In "ImageReadyFileContentResult()" method, specify the content type.