Javascript 使用jquery和FileResult更改图像的src

我正在尝试使用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);
        }
    });
});

carid

是图像的唯一标识符。以下是

图像

控制器操作：

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

是控制器任务返回的一个异步文件，它执行其任务。现在我想知道是什么原因导致了这个问题，以及如何修复它？

我看到的唯一方法是创建一个自定义处理程序，该处理程序可以从数据库中检索图像。你只需要通过相应的“cardId”

下面是一个使用asp.net实现这一点的示例，但是这个想法甚至可以在asp.net mvc或其他任何您正在使用的应用程序中使用

---

噢，哇，答案似乎比我想象的简单多了

我所要做的就是注销我想作为源代码修补的控制器操作的链接，替换源代码，瞧

下面是一个例子：

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

因此，视图中的每个项目都在其元素中存储了链接。接下来，让我们检索数据：

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

控制器方法，然后相应地加载和显示图像。网络让我惊讶

成功后是否看到警报消息？是的，每个警报都会触发。您正在下载文件，并将其应用到正在查找路径的src。你不应该提供图像的URL路径而不是实际的图像吗？我不能，或者更确切地说，我不知道如何提供。如前所述，我无法将图像物理存储在项目文件夹中，因此我不知道如何获取

返回文件（imageData，“image/png）；“

行的路径。您是否尝试过类似的操作：？