图片src属性直接请求node,返回图片二进制数据可直接显示。
如果返回图片base64字符串,需要分开操作,先请求node端返回对应的图片base64字符串,再通过JS赋值给图片src属性。
先看node端的核心代码:
const when = require('when'); const request = require("request") const controller = function (req, res) { return when.promise((resolve, reject) => { res.set({ 'Content-Type': 'image/png;charset=utf-8', 'encoding': 'binary', }) let imgUrl = decodeURIComponent(req.query.url || '');//URL解码图片URL过来 if(imgUrl){ request.get({ url: imgUrl, encoding: 'binary' }, function (err, response, body) { if(!body || err){ res.send({ code: 500, message: "查无图片" }) }else{ res.end(Buffer.from(body, 'binary'));//以二进制数据返回 resolve(); } }) }else{ resolve(); } }) } module.exports = controller;
前端可以直接通过img的src属性来请求:
<!--url参数,通过encodeURIComponent('http://example.com/testImg.png')进行URL编码透传给node--> <img src="http://example.com/test/getImgByNode?url=http%3A%2F%2Fexample.com%2FtestImg.png">