React Native:如何从 fetch 中检索图像文件内容?

use*_*363 5 fetch react-native fetch-api

在我的 React Native 0.62.2 应用程序中,IMG_1885.jpg为了测试目的,使用 fetch从云对象存储中获取图像:

let img = await fetch(bgimage.uri, {
          method:"GET",
          'Content-Type': 'image/jpeg'
        });
Run Code Online (Sandbox Code Playgroud)

这是http返回并分配给变量img

'img in sp ', { type: 'default',  //<<<==output of img
                             ? status: 200,
                             ? ok: true,
                             ? statusText: undefined,
                             ? headers:
                             ? { map:
                             ? { 'x-oss-storage-class': 'Standard',
                             ? 'accept-ranges': 'bytes',
                             ? 'content-md5': 'Au4QpWK3O8+l4qCYxDjzw==',
                             ? 'content-length': '475266',  //<<<==size of file
                             ? connection: 'keep-alive',
                             ? 'content-type': 'image/jpeg',   //<<<<==jpeg
                             ? 'x-oss-server-time': '20',
                             ? 'x-oss-object-type': 'Normal',
                             ? date: 'Sun, 05 Jul 2020 21:20:16 GMT',
                             ? 'x-oss-force-download': 'true',  //<<<==server force frontend to download
                             ? 'content-disposition': 'attachment',
                             ? 'x-oss-request-id': '5F024410980C637340B8FBD',
                             ? 'last-modified': 'Sun, 05 Jul 2020 17:26:04 GMT',
                             ? etag: '"02EE10A562B73BC23E978A826310E3CF"',
                             ? 'x-oss-server-side-encryption': 'AES256', 
                             ? 'x-oss-hash-crc64ecma': '65781719895705534',
                             ? server: 'AliyunOSS' } },
                             ? url: 'https://oss-hz-1.oss-cn-hangzhou.aliyuncs.com/IMG_1885.jpg?Expires=1593984273&OSSAccessKeyId=myID&Signature=mySigna',
                             ? bodyUsed: false,
                             ? _bodyInit:
                             ? { _data:
                             ? { size: 475266,
                             ? offset: 0,
                             ? blobId: '7f5f3eb5-8e02-470a-a06c-81bcd1161df8',
                             ? __collector: {} } },
                             ? _bodyBlob:
                             ? { _data:
                             ? { size: 475266,
                             ? offset: 0,
                             ? blobId: '7f5f3eb5-8e02-470a-a06c-81bcd1161df8',
                             ? __collector: {} } } }
Run Code Online (Sandbox Code Playgroud)

http 状态为200,内容大小与测试文件匹配。

这是img.blob()没有图像数据的输出:

[14:20:16] I | ReactNativeJS ?? 'img blob ', { _data:  //<<<== output of img.blob()
                             ? { size: 475266,
                             ? offset: 0,
                             ? blobId: '7f5f3eb5-8e02-470a-a06c-81bcd1161df8',
                             ? __collector: {} } }
Run Code Online (Sandbox Code Playgroud)

img.json() 返回错误: [SyntaxError: JSON Parse error: Unrecognized token '?']

如何从img返回的图像中检索内容?