无法通过将其 src 设置为从 jQuery 请求返回的 MVC 操作响应数据来呈现 img答案

【问题标题】：Can't render an img by setting its src to returned MVC action response data from jQuery request无法通过将其 src 设置为从 jQuery 请求返回的 MVC 操作响应数据来呈现 img
【发布时间】：2015-07-30 20:47:14
【问题描述】：

我在视图中有这个 jQuery 代码：

$(document).ready(function () {
    $(document).on('input', '#usernameTextBox', function () {
        $.get(
            '@Url.Action("GetCAPTCHAImage")',
            { username: $("#usernameTextBox").val() },
            function (data) {
                $("#captchaImage").height(50);
                $("#captchaImage").width(400);
                $("#captchaImage").attr("src", "data:image/png, " + data);
            }
        );
    });
})

它调用的动作是这样的（它有效，我可以在我的网络浏览器中浏览到这个动作来查看生成的图像，谷歌浏览器会很好地显示它而没有任何抱怨）：

[HttpGet]
public async Task<ActionResult> GetCAPTCHAImage(string username)
{
    try
    {
        return File(GenerateCaptcha(username, 40, 50), "image/png");
    }
    catch
    {
        return File(new byte[] { 0 }, "image/png");
    }
}

jQuery 逻辑从我的控制器的操作中抓取图像，然后尝试将以下 <img/> 元素的源设置为它：

<img id="captchaImage" />

问题是它不会渲染图像，但我看到数据被返回并且一切正常：

有什么问题？

【问题讨论】：

那么问题是你正在返回一个文件，你把它作为一个“字符串”直接作为 src
@ZivWeissman 为了让它渲染，我应该返回什么？
您需要先将验证码保存在您的机器上，然后返回它的位置，或者您可以将返回的数据呈现为图像...尝试查看 - stackoverflow.com/questions/6033452/…
@ZivWeissman 我刚刚让它工作了，但不是这样，我返回了一个 base 64 字符串。我会发布我的解决方案。

标签： javascript c# jquery asp.net-mvc model-view-controller

【解决方案1】：

我需要返回一个 base 64 字符串：

[HttpGet]
public async Task<string> GetCAPTCHAImage(string username)
{
    try
    {
        return Convert.ToBase64String(GenerateCaptcha(username, 40, 50));
    }
    catch
    {
        return String.Empty;
    }
}

此外，这是错误的格式，因为图像是基于 JFIF 或 jpeg 的（另请注意 base64）：

$("#captchaImage").attr("src", "data:image/jpeg;base64," + data);

【讨论】：