前端大图片显示不了，小图片可以显示

Question

我从后端往前端传图片，用的servlet程序传回图片，采用将图片分块传回的方式，但是不知道为什么，大图片显示不成功，但是小图片可以,大图的话前端会显示
![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/a7734199d5d74
633b38a44ecf36e38ad.png "#left")
我的前端代码是通过此方式获取数据并显示：
js：

```javascript
const container = document.getElementById("mapDatabase");
                        container.innerHTML=data.map(item=>`
                        <div>
                            <p>地名: ${item.addressName}</p>
                            <p>时间: ${item.time}</p>
                            <p>方位: ${item.position}</p>
                            <img src="http://localhost:8080/demo1/getMap?id=${item.id}">
                        </div>
                        `).join('');

后端：
```java
public class GetMap extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("GetMap");
        int id=Integer.parseInt(req.getParameter("id"));
        System.out.println("id:"+id);
        SearchMapDatabase searchMapDatabase=new SearchMapDatabase();
        BufferedInputStream inputStream=searchMapDatabase.searchPhoto("hjw","2206410733",id);
        byte[] photo=new byte[1024];
        resp.setHeader("Cache-Control", "no-store");// 禁用缓存，避免加载旧数据
        int length=0;
        boolean checkMIMEType=false;//是否检查过图片类型
        OutputStream out = resp.getOutputStream();
        FileOutputStream fos=new FileOutputStream("E:\\photo.jpg");
        while((length=inputStream.read(photo))!=-1){
            if(!checkMIMEType){
                String mimeType = detectMimeType(photo);
                resp.setContentType(mimeType);
                checkMIMEType=true;
                System.out.println("mimeType:"+mimeType);
            }
            out.write(photo,0,length);
            out.flush();
            fos.write(photo,0,length);
        }
        out.close();
        inputStream.close();
        fos.close();
    }
    public static String detectMimeType(byte[] data){
        // 检测 JPEG (FF D8 FF)
        if ((data[0] & 0xFF) == 0xFF && (data[1] & 0xFF) == 0xD8) {
            return "image/jpeg";
        }

        // 检测 PNG (89 50 4E 47 0D 0A 1A 0A)
        if (data[0] == (byte)0x89 && data[1] == (byte)0x50
                && data[2] == (byte)0x4E && data[3] == (byte)0x47) {
            return "image/png";
        }

        // 其他类型...
        return "application/octet-stream";
    }
}

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解决方案

你遇到的问题可能是由于图片的分块传输导致的。小图片可以显示可能是因为它们的分块数量较少，或者它们的分块大小较小，从而使得前端可以正确地组装图片。然而，大图片可能需要更多的分块，这些分块可能会被浏览器缓存或丢失，从而导致图片无法显示。

以下是一些可能的解决方案：

1. 检查图片分块的大小和数量：你可以检查图片分块的大小和数量，看看是否有任何分块被丢失或缓存。可以使用浏览器的开发工具来检查图片的分块情况。
2. 使用base64编码：你可以尝试使用base64编码将图片转换为字符串，然后在前端使用img标签将其显示。这可以避免图片分块的问题。
3. 使用canvas元素：你可以使用canvas元素来显示图片。canvas元素可以将图片分块后重新组装，从而解决图片显示问题。
4. 检查服务器端的图片分块实现：你可以检查服务器端的图片分块实现，看看是否有任何问题。例如，是否正确地将图片分块，是否正确地传输分块。

以下是一个使用base64编码显示图片的示例代码：

<img src="data:image/jpeg;base64,[图片base64编码]">

其中，[图片base64编码]是图片的base64编码。

希望这些解决方案能够帮助你解决问题。如果你需要更多帮助，请提供更多的信息。