将请求返回的图片转为Base64形式显示在页面上

情景：
如图该请求返回一张图片，我该如何显示在页面上呢？


代码如下：

transformArrayBufferToBase64 (buffer) {
        var binary = '';
        var bytes = new Uint8Array(buffer);
        for (var len = bytes.byteLength, i = 0; i < len; i++) {
            binary += String.fromCharCode(bytes[i]);
        }
        return window.btoa(binary);
    }

    componentDidMount() {
        // ...
        this.getSetCodeImg();
    }
    
    getSetCodeImg = () => {
        timerId = setTimeout(this.getSetCodeImg, 1000 *10 * 60 *5);
        axios.get('http://120.77.204.211:9091/api/getCodeImg',{responseType: 'arraybuffer'}).then(res => {
        var img = document.createElement("img");
        img.src = `data:image/jpeg;base64,${this.transformArrayBufferToBase64(res.data)}`;
        img.width = 90;
        codeImgContainner.innerHTML = '';
        codeImgContainner.appendChild(img);
        })
    }
    
	handleChangeCodeImg = () => {
	        clearTimeout(timerId);
	        this.getSetCodeImg();
    }

                   

                       
                           {
                               getFieldDecorator('code', {
                                   rules: [
                                       {required: true, message: '请输入您的验证码'}
                                   ]
                               }) (
                                   
                               )
                           }
                       
                       

                   
                   

                        

实现效果：
页面加载完成时，请求一次接口，转成图片插入到页面中，每5分钟请求一次，刷新验证码。点击图片重新获取验证码。

注意：

1. 请求时，指定请求参数：{responseType: ‘arraybuffer’}，指定返回相应数据的类型，返回的data是包含二进制数据的javaScript ArrayBuffer
   请求结果如下：
   
2. btoa() 方法用于创建一个 base-64 编码的字符串。