javascript - 使用 jquery 和 FileResult 更改图像的 src

Question

我正在尝试使用 jQuery 动态更改图像的来源。这是我们之前所做的一个示例:

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

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

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

imageSrc 变量存储图像的物理位置；但是，我们必须更改它，因为它不再确定我们是否可以访问服务器上图像的物理位置。所以我们已经将图像存储在数据库中，我正试图像这样取回它:

$('#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);
        }
    });
});

cardId是图片的唯一标识。这是 Images Controller 操作:

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

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

现在我知道操作在调试中被命中并返回正确的 byte[] 值，但是图像 src 没有更新。

第一张图片的显示方式仅供引用:

<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"/>   

GetNormalImageByCardIdAsync 是 Controller 任务返回的异步文件，它会完成自己的工作。现在我想知道是什么导致了这个问题，我该如何解决？

Answer 1

哇哦，答案似乎比我想象的要简单得多!

我所要做的就是注销我想作为源修补的 Controller 操作的链接，替换源，瞧!

这是一个例子:

@{
    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})    
}

所以这里 View 中的每个项目都有存储在其元素中的链接。接下来，让我们检索数据:

$('#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);
});

而且，令人惊讶的是，更改 url 会调用 ActionResult Controller 方法，然后相应地加载和显示图像。网络让我惊叹!