如何使用 jquery 将 json 显示为图像？

Posted 2023-03-15

【中文标题】如何使用 jquery 将 json 显示为图像？

【英文标题】：How to display json as image using jquery?

【发布时间】：2013-12-06 07:48:36

【问题描述】：

我有一个 WCF Web 服务，它以 json 格式返回图像。

[OperationContract]
        [WebGet(UriTemplate = "Service/GetCarList")]
        public List<CarModel> GetCarList()
        

            var carList = _db.Cars.ToList();
            var carPhotos = _db.CarPhotoes.ToList();
            return carList.Select(car => new CarModel
            
                Id = car.CarId,
                Model = car.Model,
                Images = carPhotos.Where(m => m.CarId == car.CarId).Select(m => m.CarPhoto1).ToList()
            ).ToList();
         

我已经尝试通过以下方式在 DOM 中显示它

@
    ViewBag.Title = "Home Page";

<script src="@Url.Content("~/Scripts/jquery-1.10.2.js")" type="text/javascript"></script>

<div id="divMyLetterImage"></div>


<script type="text/javascript">

    var getCarUrl = 'http://localhost:62051/Service/GetCarList';

    $(document).ready(function () 

        $.ajax(
            cache: false,
            type: "GET",
            dataType: "json",
            url: getCarUrl,
            success: function (response) 

                var imag = "<img "
                          + "src='" + "data:image/jpg;base64,"
                          + response[0].Images[0] + "'/>";
                $("#divMyLetterImage").replaceWith(imag);
                alert(response[0].Images[0]);
            ,
            error: function (xhr) 
                alert(xhr.responseText);
            
        );

    );
</script>

response[0].Images[0]回复我

255,216,255,224,0,16,74,70,73,70,0,1,1,1,0,96,0,96,0,0,255,236,0,17,68,117,99,10‌​7,121,0,1,0,4,0,0,0,60,0,0,255,219,0,67,0,2,1,1,2,1,1,2,2,2,2,2,2,2,2,3,5,3,3,3,3‌​,3,6,4,4,3,5,7,6,7,7,7,6,7,7,8,9,11,9,8,8,10,8,7,7,10,13,10,10,11,12,12,12,12 等

但它不工作........我该怎么做？？

【问题讨论】：

alert(response[0].Images[0]) 的输出是否正确？

或许你能想出比is not Working更好的解释？？？提供在浏览器控制台/开发人员工具中找到的详细信息。永远不要使用async: false

alert(response[0].Images[0]) 给我 255,216,255,224,0,16,74,70,73,70,0,1,1,1,0,96,0, 96,0,0,255,236,0,17,68,117,99,107,121,0,1,0,4,0,0,0,60,0,0,255,219,0,67,0,2,1,1,2,1, 1,2,2,2,2,2,2,2,2,3,5,3,3,3,3,3,6,4,4,3,5,7,6,7,7, 7,6,7,7,8,9,11,9,8,8,10,8,7,7,10,13,10,10,11,12,12,12,12 等@MartyIX

【参考方案1】：

我相信你的台词：

Images = carPhotos.Where(m => m.CarId == car.CarId).Select(m => m.CarPhoto1).ToList()

是错误的，您应该返回 base64 编码的字符串。显然（根据您的评论）您可以通过调用 .ToList() 获得代表特定字节的数字列表，但您需要返回 Base64 编码的字符串。方法Convert.ToBase64String 可能对此有用。