MVC Thumbnail Controller not (Always) returning Images

Question

I have a controller that returns thumbnail images:

public ActionResult Thumbnail(int width, int height, int ArtworkId, int PhotoTypeId)
    {
        byte[] photo = null;

        try
        {
            photo = db.Photos.Where(x => x.ID == ArtworkId && x.PhotoTypeId.ID == PhotoTypeId).FirstOrDefault().ImageBytes;
        }
        catch
        {
            using (var webClient = new WebClient())
            {
                string baseUrl = Request.Url.GetLeftPart(UriPartial.Authority);
                photo = webClient.DownloadData(baseUrl + "/Content/Images/NoImage.png");
            }
        }

        MemoryStream ms = new MemoryStream(photo);
        Image i = Image.FromStream(ms);

        // http://stackoverflow.com/questions/7319842/
        using (var srcImage = i)
        using (var newImage = new Bitmap(width, height))
        using (var graphics = Graphics.FromImage(newImage))
        using (var stream = new MemoryStream())
        {
            graphics.SmoothingMode = SmoothingMode.AntiAlias;
            graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
            graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;
            graphics.DrawImage(srcImage, new Rectangle(0, 0, width, height));
            newImage.Save(stream, ImageFormat.Png);
            return File(stream.ToArray(), "image/png");
        }
    }

I then have a view that simply calls 4 thumbnails:

<div class="row">
        <div class="col-lg-3">
            <div>FRONT</div>
            <div><img src="@Url.Action("Thumbnail", "ImageUpload", new { width = 200, height = 200, ArtworkId = 1, PhotoTypeId = 1, @id = "PhotoTypeId1" })" alt="Front" /></div>
            <div>@Html.ActionLink("Upload Photo", "Index", "Image", null, new { @class = "modal-link btn btn-success" })</div>
        </div>
        <div class="col-lg-3">
            <div>BACK</div>
            <div><img src="@Url.Action("Thumbnail", "ImageUpload", new { width = 200, height = 200, ArtworkId = 1, PhotoTypeId = 2, @id = "PhotoTypeId2" })" alt="Back" /></div>
            <div>@Html.ActionLink("Upload Photo", "Index", "Image", null, new { @class = "modal-link btn btn-success" })</div>
        </div>
        <div class="col-lg-3">
            <div>PERSPECIVE</div>
            <div><img src="@Url.Action("Thumbnail", "ImageUpload", new { width = 200, height = 200, ArtworkId = 1, PhotoTypeId = 3, @id = "PhotoTypeId3" })" alt="Perspective" /></div>
            <div>@Html.ActionLink("Upload Photo", "Index", "Image", null, new { @class = "modal-link btn btn-success" })</div>
        </div>
        <div class="col-lg-3">
            <div>PERSPECTIVE</div>
            <div><img src="@Url.Action("Thumbnail", "ImageUpload", new { width = 200, height = 200, ArtworkId = 1, PhotoTypeId = 4, @id = "PhotoTypeId4" })" alt="Perspective" /></div>
            <div>@Html.ActionLink("Upload Photo", "Index", "Image", null, new { @class = "modal-link btn btn-success" })</div>
        </div>
    </div>

I know that the images exist in the database. When I reduce the page to use any of the images individually it works perfectly.

When I use 4 images and go into debug mode it's almost as if the 4 images are "tripping over each other" when being generated.

I am obviously either doing something wrong or not doing something right :)

score 0 · Answer 1 · answered May 27 '15 at 11:05

All 4 requests are made in parallel, so when you are debugging and stepping through code it looks like "tripping over each other". Thats normal behavior. Consider using HttpContext.Current.IsDebuggingEnabled when redering view, o just calling Thumbnail action directly when you want to debug.

MVC Thumbnail Controller not (Always) returning Images

1 Answers1