I need to retailer photographs in IndexedDB, and I’m utilizing Dexie for it. After I retailer a picture in IndexedDB and retrieve it instantly afterward, I can show the picture. Nevertheless, after I retailer it, then reload the web page, and subsequently retrieve it, I can not 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({ photographs: 'id, associatedContent' });
Retailer picture: await db.photographs.add(picture);
Get Picture: db.photographs.the place('associatedContent').equals(associatedContent).toArray();
A picture object seems to be like this:
{
id: 'f9ce4b59-0219-437a-a749-fde1c75d4dd7',
title: '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 stated 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:
-
Create a brand new File from the retrieved information, then creating an object url:
const file = new File([cachedImage.file], cachedImage.title) image.authentic = URL.createObjectURL(file)
-
Create a brand new Blob from the retrieved information:
const blob = new Blob([cachedImage.file]) image.authentic = URL.createObjectURL(blob)
-
Create the article url straight from the cached picture information:
image.authentic = URL.createObjectURL(cachedImage.file)
-
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 end in a file/blob with a measurement of 0. After I examine the cachedImage.file.measurement
I get the right 16522.