3

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?

Bassist
  • 181
  • 1
  • 11
  • What's `ImageReadyFileContentResult`? – bzlm Oct 02 '11 at 18:24
  • Add a route for `GetFullSizedImage` with the `goodId` supplied; you may run into some quirks with using the query part for "static content". – bzlm Oct 02 '11 at 18:36
  • a method returns a byte[] array filled by stream: `byte[] data = new byte[outputstream.Length + 1]; outputstream.Read(data, 0, Convert.ToInt32(outputstream.Length)); return File(data, "image/jpg");` – Bassist Oct 02 '11 at 18:38
  • Man! You're a genius! I typed "jpg" and it worked fine on inner image, but when I changed this to "jpeg", the whole thing worked on all browsers! – Bassist Oct 02 '11 at 18:42
  • 1
    No problem. :) Possible duplicate of [Can an ASP.Net MVC controller return an Image?](http://stackoverflow.com/questions/186062/can-an-asp-net-mvc-controller-return-an-image) - no need to answer this one IMHO. – bzlm Oct 02 '11 at 18:43
  • Where should I mark your answer like working? – Bassist Oct 02 '11 at 18:44
  • @Bassist you should ask bzlm to convert comment to answer so you get acceptence rate. – Alxandr Oct 03 '11 at 02:43
  • @Alxandr, not answering dupes. [Tohid's answer](http://stackoverflow.com/questions/7628296/browsers-act-different-on-anchor-with-image-on-mvc3-razor/7630614#7630614) looks acceptable though. – bzlm Oct 03 '11 at 16:42

1 Answers1

1

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

Tohid
  • 6,175
  • 7
  • 51
  • 80