Change src of image using jquery and FileResult

Question

I am trying to change the source of an image dynamically using jQuery. Here's an example of what we were doing before:

$('#resultsDiv').on('mouseover', '.cardImage', function() {
        var imageSrc = $(this).attr("data-id");

        imageSrc = imageSrc.replace("~", "");

        $('#cardImageDiv').attr('src', imageSrc);
    });

The imageSrc variable was storing the physical location of an image; however, we must change that as it is no longer sure we might have access to the physical location of an image on our server. So we've stored our image in a database and I'm trying to get it back like this:

$('#resultsDiv').on('mouseover', '.cardImage', function () {
    var cardID = $(this).attr("data-id");

    alert("woah!");

    alert(cardID);

    $.ajax({
        type: "GET",
        url: '@Url.Action("UpdateImageByCardID","Images")',
        data: {_cardid: cardID},
        datatype: "image/png",
        success: function (data) {
            alert("yeah!");
            $('#cardImageDiv').attr('src', data);
        }
    });
});

The cardId is the unique identifier of the image. Here's the Images controller action:

public FileResult UpdateImageByCardID(int? _cardid)
{
    byte[] imageData = mImageManager.GetNormalImageAsyncByCardId((int)_cardid);

    return File(imageData, "image/png");
}

Now I know the action is hit in debugging and returns a correct byte[] value, however the image src is not updated.

For information only here's how the first image is displayed:

<img id="cardImageDiv" src="@Url.Action("GetNormalImageByCardIdAsync", "Images", new { @_cardId = firstSrc.CARD_IDE})" alt="@firstSrc.CARD.CARD_NAME" title="@firstSrc.CARD.CARD_NAME" class="nullify"/>

The GetNormalImageByCardIdAsync is an asynchronous file returned by the controller task and it does its job. Now I wanna know what's causing the problem and how can I fix it?

You are downloading the file and you are applying it to the src which is looking for a path. Shouldn't you be providing a URL path to the image instead of an actual image? — Gjohn, Sep 18 '14 at 16:26
I can't or rather I don't know how. As mentioned, I cannot store the image physically in a project folder, so I do not know how to get the path of the `return File(imageData, "image/png);"` line. — hsim, Sep 18 '14 at 16:29
Just to mention, every image is stored in the database as byte arrays. — hsim, Sep 18 '14 at 16:30
Have you attempted something like this: http://stackoverflow.com/questions/17952514/mvc-how-to-display-a-byte-array-image-from-model ? — skeryl, Sep 18 '14 at 16:33
@skeryl I know how to convert byte arrays to base64 strings, the problem lies here in that I want to update the image source dynamically after the view is rendered using jquery; thus, I cannot convert the data obtained to base 64. — hsim, Sep 18 '14 at 17:03

score 2 · Accepted Answer · answered Sep 18 '14 at 17:45

Oh wow, seems like the answer was MUCH SIMPLER that I thought!

All I had to do was write off the link of the controller action I wanted to patch as source, replace the source, and voila!

Here's an example:

@{
    string src = "/Images/GetNormalImageByCardIdAsync?_cardid=" + CardPackViewModel.CARD.CARD_IDE;

    @Html.ActionLink(CardPackViewModel.CARD.CARD_NAME, "ItemDetails", "Item", new { @_itemID = CardPackViewModel.CARD_IDE, @_provenance = "Deck" }, new { @class = "cardImage", @data_id = src, @data_name = CardPackViewModel.CARD.CARD_NAME})    
}

So here each items in the view has the link stored in its element. Next, let's retrieve the data:

$('#resultsDiv').on('mouseover', '.cardImage', function () {
    var imageLink = $(this).attr("data-id");

    var itemName = $(this).attr("data-name");

    $('#cardImageDiv').attr('src', imageLink);

    $('#cardImageDiv').attr('alt', itemName);

    $('#cardImageDiv').attr('title', itemName);
});

And, amazingly, the changing of the url calls the ActionResult controller method and the image is then loaded and displayed accordingly. The web amazes me!

score 1 · Answer 2 · answered Sep 18 '14 at 16:35

The only way I have seen this done is by creating a custom handler that goes and retrieves your image from the database. You just need to pass the appropriate "cardId"

Here is an example of doing this with asp.net but the idea can be used even in asp.net mvc or whatever else you are using

http://aj-learning.com/blog/store-retrieve-image-database-asp-net-using-jquery/

Change src of image using jquery and FileResult

2 Answers2