Question

我正在尝试使用AJAX显示我从控制器调用的图片，这是我的代码：

<div id="productImg" style="display:none;">

</div>


<script>
    function showPic(id) {

        $.ajax({
            type: "GET",
            url: "/Equipment/GetImage",
            data: { 'productId': id },
            success: function (data) {
                $("#productImg").html(data)

            }
        });
</script>

我的控制器上的方法如下所示：

public virtual FileContentResult GetImage(int productId) {
  Product prod = _db.Products.FirstOrDefault(p => p.ProductID == productId);
  if (prod != null) {
    return File(prod.ImageData, prod.ImageMimeType);
  } else {
    return null;
  }
}

我得到的是很多代码，而不是图像。我还能尝试什么？

Answer 1

您不需要为此使用AJAX。图像是页面的单独资源，并且已作为单独的请求加载。只需链接到它：

<div id="productImg">
    <img src="/Equipment/GetImage?productId=123" alt="Product" />
</div>

为了在JavaScript中动态实现，您需要做的就是更改src值：

function showPic(id) {
    $('#productImg img').src = '/Equipment/GetImage?productId=' + id;
}

顺便说一句，你的方法不能工作的原因是因为你从服务器回来的不是HTML，而是原始图像数据。用于显示图像的HTML不是图像数据本身，它只是带有URL的img标记。（该URL 可以包含实际数据的编码副本，但在这种情况下确实不需要。）

Answer 2

请将您的Action方法修改为以下内容：

public virtual ActionResult GetImage(int productId)
{
    Product prod = _db.Products.FirstOrDefault(p => p.ProductID == productId);
    if (prod != null)
    {
        return new FileStreamResult(prod.ImageData, prod.ImageMimeType);
    }
    else
    {
        return null;
    }
}

让我知道这是否有效...... 或者，您可以做的是，您可以将一些文本添加到来自ajax调用的图像数据中以显示图像。你所要做的只是前置

数据：图像/ PNG; BASE64，

其中image / png是mime-type。

然后，当你将src推送到图像标签时，src将看起来像这样......

<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0 vr4MkhoXe0rZigAAAABJRU5ErkJggg==" />

希望它有效......

使用AJAX显示图像

2 个答案: