[英]How to Read image data from API and render in React Component
我正在尝试从Web服务渲染图像数据,并能够获得如下数据
我正在尝试读取以下图像数据,但图像未显示,
getImageFromDrive = (path) => {
let that = this;
axios.get(Constants.API + Constants.Files, {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
"Authorization": Constants.AUTH_Element + ',' + Constants.AUTH_ORG + ',' + Constants.AUTH_USER
},
params: {
path: path
}
}).then(function (response) {
var myThat =that;
console.log(response);
let data = response.data;
var base64Flag = 'data:image/jpeg;base64,';
var imageStr =
that.arrayBufferToBase64(data.img.data.data);
that.setState({img: base64Flag + imageStr});
})
.catch(function (error) {
console.log(error);
})
}
arrayBufferToBase64(buffer) {
var binary = '';
var bytes = [].slice.call(new Uint8Array(buffer));
bytes.forEach((b) => binary += String.fromCharCode(b));
return window.btoa(binary);
};
render() {
const {img} = this.state;
return (
<img className="myImg" alt="" width="300"
height="300" src={img}/>
)
}
谁能建议我如何读取此类数据并显示
尝试下面的代码。
export async function getImageData() {
await axios.get(`your api url`, {responseType: 'arraybuffer'}).then((data) => {
const b64Data = btoa(
new Uint8Array(data.data).reduce(
(dataArray, byte) => {
return dataArray + String.fromCharCode(byte);
},
''
)
);
const userAvatarData = {
key: 'userAvatar',
value: `data:image/png;base64,${b64Data}`
};
return userAvatarData.value; // here we return the base64 image data to our component
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.