javascript – Blobs and Recordsdata retrieved from Indexeddb on IOS are empty

I wish to retailer photos in IndexedDB, and I’m utilizing Dexie for it. Once I retailer a picture in IndexedDB and retrieve it instantly afterward, I can show the picture. Nevertheless, once I retailer it, then reload the web page, and subsequently retrieve it, I am unable to show it on iOS units. It does work for all of the Android and Home windows units I’ve tried.

Extra code context:

Dexie Init config: _imageDB.model(2).shops({ photos: 'id, associatedContent' });

Retailer picture: await db.photos.add(picture);

Get Picture: db.photos.the place('associatedContent').equals(associatedContent).toArray();

A picture object appears to be like like this:

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

Tried options:

I attempted a number of issues to show the retrieved information. And as I mentioned all of them work for Home windows and Android and none for ios.

I at all times attempt to show them with this img tag: <img src={image.authentic} alt={image.originalAlt} loading='lazy' />.

I attempted:

1. Create a brand new File from the retrieved information, then creating an object url:

   const file = new File([cachedImage.file], cachedImage.identify)
   image.authentic = URL.createObjectURL(file)
   

2. Create a brand new Blob from the retrieved information:

   const blob = new Blob([cachedImage.file])
   image.authentic = URL.createObjectURL(blob)
   

3. Create the article url instantly from the cached picture information:

   image.authentic = URL.createObjectURL(cachedImage.file)
   

4. Retailer the picture not as File however as Blob.

Up to now every strive ended with this blue questionmark field.

Tries 1 and a pair of lead to a file/blob with a measurement of 0. Once I verify the cachedImage.file.measurement I get the right 16522.