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
– Gjohn, Commented Sep 18, 2014 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
– hsim, Commented Sep 18, 2014 at 16:29
Have you attempted something like this: stackoverflow.com/questions/17952514/… ? — skeryl
– skeryl, Commented Sep 18, 2014 at 16:33

hsim · Accepted Answer · 2014-09-18 17:45:54Z

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!

Gjohn · Accepted Answer · 2014-09-18 16:35:07Z

1

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/

answered Sep 18, 2014 at 16:35

Gjohn

1,2811 gold badge8 silver badges12 bronze badges

Collectives™ on Stack Overflow

Change src of image using jquery and FileResult

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related