Question

在MVC中，我们将从服务器获取图像并在客户端显示它，控制器中的GetImage Action如下：

public ActionResult GetImage(int ImageID)
{
    byte[] imgByteArray=GetImageByteArrayFromDB(ImageID);
    string contentType = "Image/jpeg";
     return File(imgByteArray, contentType,  "Image10.jpg");              
}

客户端的javascript代码如下：

 $.ajax(
...
  success: function (response) {
                $('#imgResult')
                 .attr('src', 'data:image/jpeg;base64,' + response);
           },
    error: function (er) {
                        alert(er);
          }

成功接收响应但未显示图像且src值设置为：

src="data:image/jpeg;base64,�����JFIF���������C����C        �������&quot;�������������� �������}�!1AQa&quot;q2���#B��R��$3br�

如何解决此问题？

Answer 1

您的Controller正在向View返回一个File对象，JS正在输出该数据。

您需要将bytearray转换为base64字符串，然后在视图中使用它。

e.g。

byte[] imgByteArray=GetImageByteArrayFromDB(ImageID);
var base64 = Convert.ToBase64String(imgByteArray);
return Content(String.Format("data:image/jpeg;base64,{0}", base64));

然后：

$.ajax(
...
  success: function (response) {
                $('#imgResult')
                 .attr('src', response);
           },
    error: function (er) {
                        alert(er);
          }

在MVC中获取图像并使用Javascript显示

1 个答案: