html展示图片的两中方式

1、url展示（url展示图片<img src='/img/demo.png'/>）

        1.1、该方式比较大众化，对应后台java代码如下：

@RequestMapping(value = "/img/demo.png")
public void demo(HttpServletResponse response) throws IOException {
    Writer writer = response.getWriter();
    FileInputStream inputStream = null;
    try {
        inputStream = new FileInputStream(new File("d:/demo.png"));
        IOUtils.copy(inputStream,writer);
    } catch (FileNotFoundException e) {
        e.printStackTrace();
    }finally {
        IOUtils.closeQuietly(inputStream);
    }
}

         1.2、下载功能，需要向后台二次发送请求，其次图片名称如果是中文的话容易乱码、并且一个url对应一张图片，下载代码不在赘述。

 

2、base64展示（base64展示图片<img src="https://img-blog.csdnimg.cn/2022010703450230663.bmp"/>） 

        2.1、该方法写法比较少见、java代码如下：

@RequestMapping(value = "/img/page")
public void demo(Model model) throws IOException {
    FileInputStream inputStream = null;
    try {
        inputStream = new FileInputStream(new File("d:/demo.png"));
        byte[] src = IOUtils.toByteArray(inputStream);
        BASE64Encoder encode = new BASE64Encoder();
        String base64 = encode.encode(src);
        model.addAttribute("base64Data", base64);
    } catch (FileNotFoundException e) {
        e.printStackTrace();
    } finally {
        IOUtils.closeQuietly(inputStream);
    }
}

        2.2、下载功能，不需要再次向后台发送请求，并且文件名称不存在中文显示乱码的问题，具体下载代码如下：

function download(base64Data, imgname) {
    var alink = document.createElement("a");
    alink.href = base64Data;
    alink.download = imgname;
    alink.click();
}

           以上是我个人笔记，若有不正确的地方请联系我(QQ:1298001635)或者留言，互相学习