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控制器操作：

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是控制器任务返回的异步文件，它完成了它的工作。现在我想知道是什么导致了这个问题，我该如何解决？

Answer 1

哇，哇，似乎答案很简单，我想到了！

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

以下是一个例子：

@{
    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控制器方法，然后加载并显示图像。网络令我惊讶！

Answer 2

我看到这样做的唯一方法是创建一个自定义处理程序，从数据库中检索并检索图像。你只需要传递适当的“cardId”

以下是使用asp.net执行此操作的示例，但这个想法甚至可以在asp.net mvc或其他任何使用中使用

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

使用jquery和FileResult更改图像的src

2 个答案: