使用 fetch() 获取 jpeg 数据时，应调用返回的 response 对象的 blob() 方法将其转换为 blob 对象。随后利用 url.createobjecturl() 生成临时 url 并赋值给 src 属性即可显示图片。若需处理二进制流或上传，可直接操作该 blob 实例。
如何将响应体转换为可用的图片资源
直接回答：通过 response.blob() 将 Fetch 响应体转换为 Blob 对象，并使用 URL.createObjectURL() 创建浏览器可识别的资源地址。
const imageUrl = 'https://example.com/image.jpg';
fetch(imageUrl)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.blob();
})
.then(blob => {
const objectUrl = URL.createObjectURL(blob);
const img = document.createElement('img');
img.src = objectUrl;
document.body.appendChild(img);
// 释放内存
setTimeout(() => URL.revokeObjectURL(objectUrl), 10000);
})
.catch(error => console.error('Fetch error:', error));
上述代码首先发起请求，检查状态码后调用 blob() 提取二进制数据。接着创建 Object URL 并插入 DOM。最后通过 revokeObjectURL 清理内存，防止泄漏。
如何验证返回数据的 MIME 类型
直接回答：通过检查 Response 对象的 headers.get('Content-Type') 确认是否为 image/jpeg，确保数据格式正确。
fetch(imageUrl)
.then(response => {
const contentType = response.headers.get('content-type');
if (!contentType || !contentType.includes('image/jpeg')) {
throw new Error('Expected JPEG image, got: ' + contentType);
}
return response.blob();
})
.then(blob => {
console.log('Blob size:', blob.size, 'bytes');
console.log('Blob type:', blob.type);
// 继续处理...
});
在转换前增加类型校验，可有效避免将非图片数据误当作图片处理。检查 content-type 头信息是标准做法，能提前拦截错误的数据源。
基于 Blob 对象的 size 属性判断数据完整性
直接回答：通过检查 Blob 的 size 属性是否大于零，可以初步判断接口是否成功返回了有效的 JPEG 数据内容。
fetch(imageUrl)
.then(response => response.blob())
.then(blob => {
if (blob.size === 0) {
console.warn('Received empty JPEG data');
return;
}
const objectUrl = URL.createObjectURL(blob);
const img = document.createElement('img');
img.src = objectUrl;
img.onload = () => URL.revokeObjectURL(objectUrl);
document.body.appendChild(img);
});
当服务器返回空响应或错误页面（如 HTML 错误页）但状态码为 200 时，blob().size 可能不为零但内容错误。因此结合 size 检查和后续 img.onload 事件监听，是更稳健的验证策略。此段代码展示了如何利用 Blob 属性进行基础完整性校验。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
