Front-end page display pictures

Read the image path from the database, and then read it locally from the server and display it on the page. Due to the problem of local server permissions, it has not been able to be directly read. After several twists and turns, the layer was used to achieve it, and it is specially recorded for subsequent reference:

Front-end code:

<td  id="imgs">
<c:if test="${rpReportBl.img != null}"><a href='javascript:picLook("${rpReportBl.img}");' >图片预览</a>
</c:if></td>   
         

JS:

<script type="text/javascript">
function picLook(fileUrls){
        if(fileUrls != ''){
            var pic = fileUrls.split(';');
var data = [];
for(var i=0;i<pic.length;i++){
                if(pic[i] != '' ){
                    var picData = {
                        src:"${ctx}                            /redpacket/rpReportBl/getPic?fileName=" +pic[i] ,//Original image address, here is the path, return binary data
 alt :pic[i]                           //Picture name 
                    } ;
 data. push (picData) ;/ /Store multiple image properties into the data array
 }                                    
            }
            layer . photos ({
                 closeBtn : true ,//top right close
 photos : {
                     data : data // put the array in                
                }
            }) ;
 } else {
             alert ( 'no picture' ) ;
 }                
    }
</script>

Background code:

/**
 * 返回图片流
 * @param fileName
* @param request
* @param response
* @return
*/
@RequestMapping(value = "getPic")
public String IoReadImage( String fileName,HttpServletRequest request,HttpServletResponse response)  {    
   ServletOutputStream out = null;
   FileInputStream ips = null;
   try {
      //获取图片存放路径
      String imgPath = Global.getConfig("imgsurl")+ File.separator+fileName;
      ips = new FileInputStream(new File(imgPath));
      response.setContentType("multipart/form-data");
      out = response.getOutputStream();
//读取文件流
int len = 0;
      byte[] buffer = new byte[1024 * 10            ];
      while ((len = ips.read(buffer)) != -1){
         out.write(buffer,0,len);
      }
      out.flush();
   }catch (Exception e){
      logger.error("",e);
   }finally {
      try {
         out.close();
      } catch (IOException e) {
         logger.error("",e);
      }
      try {
         ips.close();
      } catch (IOException e) {
         logger.error("",e);
      }
   }
   return null;
}
If there are any deficiencies, please point out and encourage each other! good at good at



























Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324688793&siteId=291194637
Recommended