java后端返回图片二进制及前端显示

原创  微微一笑抽了筋   2020-07-09   205人阅读  1 条评论

java后端代码:

@GetMapping(value="/getIcon")
public MessageInfo <? > getIcon(String imgName) {
	try {
		String imageStr = getImgStr(imgName);
		return ResponseMsg.success(imageStr);
	} catch(Exception e) {
		return ResponseMsg.error(e.getMessage());
	}
}
public String getImgStr(String imgFile) {
	// 将图片文件转化为字节数组字符串,并对其进行Base64编码处理
	InputStream in = null;
	byte[] data = null;
	// 读取图片字节数组
	try { in = new FileInputStream(basePath + "/image/" + imgFile);
		data = new byte[ in .available()]; in .read(data);
	} catch(IOException e) {
		e.printStackTrace();
	} finally {
		try { in .close();
		} catch(IOException e) {
			e.printStackTrace();
		}
	}
	return new String(Base64.encodeBase64(data));
}

html页面代码:

<img class="fl" id="titleIcon" src="" alt="" title=""/>

js代码:

$(document).ready(function() {
	getIcon("logotitle.png",
	function(imageStr) {
		imageStr = imageStr == null ? "img/logotitle.png": "data:image/jpeg;base64," + imageStr;
		$("#titleIcon").attr("src", imageStr);
	});
});

//获取图标
function getIcon(imgName, callback) {
	mui.ajax({
		url: urlRealPath + "indexAction/getIcon",
		type: 'get',
		data: {
			imgName: imgName
		},
		success: function(msg) {
			if (msg.code == '200') {
				callback(msg.data);
			} else {
				callback(null);
			}
		},
		error: function(xhr, type, errorThrown) {
			callback(null);
		}
	});
}

    本文地址:https://www.lee2333.com/?id=34
    版权声明:本文为原创文章,版权归 微微一笑抽了筋 所有,欢迎分享本文,转载请保留出处!

    发表评论


    表情

    评论列表

    1. 访客
      访客  @回复

      找了很多,总算找到了后端传图片给前端的代码样例,用的是base64的,正好是我需要的,点赞