如何使用页面中的img标签读取本地磁盘中的图片，并展现到页面上

最新推荐文章于 2022-12-23 07:54:12 发布

原创最新推荐文章于 2022-12-23 07:54:12 发布 · 2.6w 阅读

CC 4.0 BY-SA版权

本文介绍了在使用easyUI时遇到的问题，如何通过Java后端读取本地磁盘图片并以流的形式返回给前端，使得HTML页面能够正确显示图片。通过在img标签的src属性中设置一个请求路径，后端接收到路径参数后，读取文件字节流并将其通过response输出，从而实现本地图片的展示。

我在使用easyUI的过程中，想要达到的效果是，每行都带有一个小图片（缩略图），因此每行都要添加一个img标签，但src的路径我写成绝对路径即 F：/photo/aa/jpg ，无法查看到图片，显示img中的alt属性，然后查阅网上的见解，说要在路径前添加file:///，即 file:/// F：/photo/aa/jpg ，仍是打不开，纠结了好久，找不到原因，最后经老大指导，需要读取流。

操作如下，即在img的src路径内写入路径请求并指定能找到图片地址的参数，我传入的参数直接是图片的地址，请求到后台，使用文件字节流按照图片地址读取图片，使用response输出，这样页面就可以展示本地的图片了。

代码思路比较低端，有好的链接也发我一个呗，共同学习一下。

@RequestMapping(value = "/showImg")
  @ResponseBody
  public void showImg( HttpServletRequest request,HttpServletResponse response,String pathName) {
   File imgFile = new File(pathName);
   FileInputStream fin = null;
   OutputStream output=null;
   try {
    output = response.getOutputStream();
    fin = new FileInputStream(imgFile);
    byte[] arr = new byte[1024*10];
    int n;
    while((n=fin.read(arr))!= -1){
     output.write(arr, 0, n);
    }
    output.flush();
   } catch (IOException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
   }

   try {
    output.close();
   } catch (IOException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
   }
  }