我正在尝试从 Blob 中渲染
第一个
获取图像二进制数据的函数。
<img>
图像。import React from 'react';
import { getImageBlob } from '../api/images';
class ImageViewer extends React.Component {
state = {
src: undefined,
loading: true,
}
componentDidMount() {
getImageBlob()
.then((imageBlob) => {
console.log(imageBlob);
const urlCreator = window.URL || window.webkitURL;
const imageUrl = urlCreator.createObjectURL(imageBlob);
console.log(imageUrl);
this.setState({ src: imageUrl, loading: false });
})
.catch((err) => {
console.error(err);
this.setState({ loading: false });
});
}
render() {
if (this.state.loading) {
return 'loading';
}
return <img src={this.state.src} height={100} width={100} />;
}
}
export default ImageViewer;
第一个
console.log()
的输出大致如下:Blob(5842218) {size: 5842218, type: "application/json"}
我认为可能是type
的原因导致它没有渲染,但我不确定。
第二个console.log()
的输出大致如下:
blob:http://localhost:3000/12bfba06-388d-48e2-8281-5ada40a662de
getImageBlob()
函数是:获取图像二进制数据的函数。
export const getImageBlob = () => new Promise((res, rej) => {
client
.get(`${IMAGES}`, {
responseType: 'blob',
})
.then((resp) => {
res(resp.data);
})
.catch((err) => {
rej(Error(err.message));
});
});
可能是服务器发送的数据有误,如果需要,我可以发布代码。
更新服务器代码
以下是将图像Blob返回的代码。
const getImage = (imageKey) => {
const params = {
Bucket: process.env.S3_BUCKET,
Key: imageKey,
};
return new Promise((res, rej) => {
s3.getObject(params, (err, data) => {
if (err) {
rej(Error(err.message));
} else {
console.log(data);
res(data);
}
});
});
};
console.log()
在服务器端的输出结果:
{ AcceptRanges: 'bytes',
LastModified: 2018-08-18T18:07:39.000Z,
ContentLength: 2101981,
ETag: '"be594978d48fdc5964eb97ffb2c589f1"',
ContentEncoding: 'blob',
ContentType: 'image/jpg',
Metadata: {},
Body:
<Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 27 10 00 00 27 10 08 06 00 00 00 ba 4e 62 27 00 00 20 00 49 44 41 54 78 5e ec d0 01 0d 00 30 08 ... > }
getImageBlob()
中的contentType
设置为image/jpeg
似乎不起作用。应该将其设置为application/json
吗? - Colin RicardoBlob
对象的大小只有2
。 - Colin Ricardoconsole.log(imageBlob); const urlCreator = window.URL || window.webkitURL; const imageUrl = urlCreator.createObjectURL(imageBlob); console.log(imageUrl);
谢谢。 - Rubel hasan