• servlet异步返回图片失败，页面不显示

    关注 码龄 粉丝数 原力等级 -- 被采纳 被点赞 采纳率 暮雪(｡･ω･｡) 2024-06-08 16:30 采纳率: 80% 浏览 2 首页/ 编程语言 / servlet异步返回图片失败，页面不显示 java <%@ page contentType="text/html;charset=UTF-8" language="java" %> 异步

    import javax.servlet.*; import javax.servlet.http.*; import javax.servlet.annotation.*; import java.io.*; @WebServlet("/Movie") public class MovieServlet extends HttpServlet { private final Movies movies = new Movies(); @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String movie = request.getParameter("movie"); String content = request.getParameter("content"); if (movie != null && !"".equals(movie)) { if ("description".equals(content)) { String description = movies.getDescription(movie); response.setContentType("text/plain"); response.setCharacterEncoding("UTF-8"); PrintWriter out = response.getWriter(); out.println(description); } else if ("photo".equals(content)) { String photo = movies.getPhoto(movie); String path = getServletContext().getRealPath("/images/" + photo); response.setContentType("image/jpeg"); response.setContentLength((int) new File(path).length()); InputStream in = new BufferedInputStream(new FileInputStream(path)); ServletOutputStream out = response.getOutputStream(); byte[] buffer = new byte[1024]; int bytesRead; while ((bytesRead = in.read(buffer)) != -1) { out.write(buffer,0, bytesRead); } } } } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } } 展开全部 收起 写回答 好问题 0 提建议 追加酬金 关注问题 微信扫一扫 点击复制链接 分享 邀请回答 编辑 收藏 删除 结题 收藏 举报 追加酬金 (90%的用户在追加酬金后获得了解决方案) 当前问题酬金 ¥ 0 (可追加 ¥500） ¥ 15¥ 20¥ 50¥ 100¥ 200 支付方式 扫码支付 二维码出错 点击刷新 支付金额 15 元 提供问题酬金的用户不参与问题酬金结算和分配 支付即为同意 《付费问题酬金结算规则》 结题 再想想 删除 再等等

    2条回答 默认 最新

    • 专家-赤兔[在线] 全栈领域优质创作者 2024-06-08 16:30
      关注

      引自免费微信小程序：皆我百晓生

      在分析提供的HTML页面和Java MovieServlet 之后，我发现了一个可能导致图片不显示的问题。在发送请求获取照片时，你可能没有正确地处理异步加载。当图片加载完成后，你需要将图片数据转换为Base64编码，并将其作为响应内容返回给前端。

      以下是修改后的Servlet代码，使用了Apache Commons Codec库进行Base64编码（如果你还没有添加这个依赖，可以添加到项目的pom.xml文件中）：

      

  ...
  
    commons-codec
    commons-codec
    1.15
  
  ...

      然后在Java MovieServlet 中对获取图片的部分做如下修改：

      import org.apache.commons.codec.binary.Base64;

// ...

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // ... 省略其他部分

    else if ("photo".equals(content)) {
        String photo = movies.getPhoto(movie);
        String path = getServletContext().getRealPath("/images/" + photo);
        BufferedImage image = ImageIO.read(new File(path));

        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        ImageIO.write(image, "jpg", baos);
        byte[] imageData = baos.toByteArray();

        String encodedImage = Base64.encodeBase64String(imageData);
        
        response.setContentType("text/html; charset=UTF-8");
        PrintWriter out = response.getWriter();
        out.println("");
    }
}

// ... 省略其他部分

      这样，当用户请求照片时，Servlet会返回一个内联的Base64编码的图片标签，这应该能在浏览器中正确显示图片。由于我们已经直接在响应中包含了图片数据，所以前端不需要处理Blob对象和创建Object URL了。

      在前端JavaScript部分，你可以删除与图片加载相关的所有代码，因为这些逻辑已经移到了服务器端。只保留基本的HTML结构和按钮事件监听器即可。这是修改后的HTML部分：

      现在，当用户点击查询按钮时，图片将会被直接渲染在页面上。如果还有任何问题，请告诉我，我会继续提供帮助。

      展开全部

      评论 编辑记录
    • 阿里嘎多学长 2024-06-08 16:30
      关注

      以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

      根据你提供的代码和问题描述，以下是可能的问题和解决方案：

      1. JavaScript异步请求图片数据：

        • 确保onPhotoReceived函数中的request2.readyState和request2.status检查正确。从你的代码看，这部分是正确的。

      2. Blob URL的创建和设置：

        • 你已经使用URL.createObjectURL(blob)来创建Blob URL，并将其设置为图片元素的src属性。但是，请注意，Blob URL的创建应该是在responseType设置为'blob'之后，确保request2.response是一个Blob对象。你可能需要在request2.open调用中添加responseType: 'blob'。

      3. 图片元素显示问题：

        • 你的图片元素初始样式设置为display: none;，然后在onPhotoReceived函数中设置为"inline"。但是，你设置了img.onload函数，这可能不是必需的，因为src属性更新后，浏览器会自动尝试加载图片。你可以尝试移除img.onload函数，直接在onPhotoReceived函数中设置display属性。

      4. Servlet响应图片请求：

        • 你的Servlet代码看起来是正确的，它设置了正确的Content-Type，并且发送了图片数据。但是，确保getPhoto方法返回的是图片文件的路径，并且图片文件确实存在于服务器上。

      5. 其他潜在问题：

        • 确保图片文件的路径是正确的，并且服务器有权限访问该文件。
        • 检查浏览器的控制台是否有任何错误信息，这可能会提供更多线索。

      以下是修改后的JavaScript代码示例，添加了responseType: 'blob'：

      request2.open("get", url, true);
request2.responseType = 'blob'; // 添加这行代码
// 回调函数
request2.onreadystatechange = onPhotoReceived;
request2.send(null);

      以及修改后的图片显示逻辑：

      function onPhotoReceived() {
  if (request2.readyState == 4) {
    if (request2.status == 200) {
      let img = document.getElementById("photo");
      let url = URL.createObjectURL(request2.response); // 确保response是Blob对象
      img.src = url;
      img.style.display = "inline"; // 直接设置display属性
    }
  }
}

      参考资料：

      如果这些修改后仍然存在问题，建议检查网络请求和响应头部，确保没有跨域问题或其他HTTP错误。同时，使用浏览器的开发者工具进行调试，查看网络请求和响应的具体内容。

      展开全部

      评论 编辑记录
    编辑
    预览

    报告相同问题？

  • 相关阅读:
    《canvas》之第13章 事件操作
    基于pig架构的OAuth2学习记录
    OceanBase 分布式数据库【信创/国产化】- OceanBase V4.3 更新了什么 What‘s New
    《痞子衡嵌入式半月刊》 第 53 期
    Nginx
    [Qt]多线程和套接字通信
    智能化市场「分层」开始，软硬「解耦」进入深水区
    安科瑞支持以太网通讯、profibus通讯嵌入式电能表APM指导性技术要求-Susie 周
    探索未来金融科技 SCF新加坡举办启动盛会
    大数据必学Java基础（九十七）：事务及回滚点
  • 原文地址：https://ask.csdn.net/questions/8115841