字节流图像未在浏览器中显示

Question

您好，我想使用 ajax 在浏览器中动态显示服务器端图像。

但图片不会出现。

我已经在调试模式下检查了服务器代码，它工作正常，但不确定客户端代码。

readyState 为 4，但图像未显示。

服务器代码：

 File f = new File("D:\\mapping events\\Camping\\"+(String) request.getParameter("imageName")+"\\"+"01.jpg");
          DataInputStream dis = new DataInputStream(new FileInputStream(f));
          byte[] barray = new byte[(int) f.length()];

          try 
          { 
            dis.readFully(barray);           // now the array contains the image
          }
          catch (Exception e) 
          { 
            barray = null; 
          }
          finally 
          { 
            dis.close( ); 
          }

          sos.write(barray);                 // send the byte array to client

          System.out.println(barray);
          sos.close();

Ajax 代码：

 $.ajax({
            url: 'GetCampingImages',
            type: 'POST',
            data:{
                imageName:allData[0]
            },
            cache: true,
            dataType: 'json',
           success: function(jqXHR)
           {
            if(jqXHR)
            {
                if (jqXHR.readyState == 4) {
                $('#dynamicCamping01').html('<img src="data:image/jpeg;'+jqXHR.reresponseText+'"/> ');
                $('#dynamicCampingDesc01').html("<h3>"+allData[0]+"</h3>");
            }
            }
            else
            {
                alert("Something went wrong while retriving events");
            }
        },
        error: function(jqXHR)
        {

           console.log('ERRORS in server: ' );
        }

Answer 1

您应该使用 base64 对二进制数据进行编码，并使用以下方案：“data:image/jpeg;base64,...”。对于 jpeg 文件，直接发送数据字节不是一个好主意。