从 IOS 上的 Indexeddb 检索到的 Blob 和文件为空

Question

我想将图像存储在 IndexedDB 中，我正在使用 Dexie。当我将图像存储在 IndexedDB 中并立即检索它时，我可以显示该图像。但是，当我存储它，然后重新加载页面并随后检索它时，我无法在 iOS 设备上显示它。它确实适用于我尝试过的所有 Android 和 Windows 设备。

更多代码上下文：

Dexie 初始化配置：

_imageDB.version(2).stores({ images: 'id, associatedContent' });

存储图片：

await db.images.add(image);

获取图像：

db.images.where('associatedContent').equals(associatedContent).toArray();

图像对象看起来像这样：

{
  id: 'f9ce4b59-0219-437a-a749-fde1c75d4dd7',
  name: 'iphonetest.jpg',
  file: new File([blob], 'iphonetest.jpg'),
  associatedContent: 'test',
  creationTime: Date.now(),
  uploadTime: Date.now(),
},

尝试过的解决方案：

我尝试了多种方法来显示检索到的数据。正如我所说，它们都适用于 Windows 和 Android，但不适用于 ios。

我总是尝试用这个 img 标签来显示它们：

<img src={picture.original} alt={picture.originalAlt} loading='lazy' />

。

我尝试过：

1. 从检索到的数据创建一个新文件，然后创建一个对象 url:

   const file = new File([cachedImage.file], cachedImage.name)
   picture.original = URL.createObjectURL(file)
   

2. 从检索到的数据创建一个新的 Blob：

   const blob = new Blob([cachedImage.file])
   picture.original = URL.createObjectURL(blob)
   

3. 直接从缓存的图像数据创建对象url：

   picture.original = URL.createObjectURL(cachedImage.file)
   

4. 将图像存储为 Blob，而不是文件。

到目前为止，每次尝试都以这个蓝色问号框结束。

尝试 1 和 2 会生成大小为 0 的文件/blob。当我检查

cachedImage.file.size

时，我得到了正确的 16522。

Answer 1

我也有类似的问题。你找到解决办法了吗？