0

Here's a detailed explanation on what I'm trying to do-

I'm reading a HTML file from a directory which has the image tag used but the assets are mapped locally and are not from url.

So somehow I'm able to get access to the file.

const fileHandle = await dirHandler.getFileHandle(file);

Now, I somehow want to use the content of this file inside img tag.

The way it's possible is using having a base64 url encoded file.

I'm not finding much stuff/detail on this.

A help would be highly appreciated.

Thanks

Atul Bhatt
  • 485
  • 1
  • 6
  • 15

1 Answers1

1

You don't need a base64 data url nor do you want it, instead create a blob: URL from the File object your FileHandle points to. To retrieve this File object, call the getFile() method of your handle.

const file = await fileHandle.getFile();
const url = URL.createObjectURL(file);
img.src = url;

or in a single line

img.src = URL.createObjectURL(await fileHandle.getFile());
Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • Thanks to you now I get the url which comes out to be something like this: http://localhost:3000/e3ee1204-f1c4-4905-bb21-1fd12a450199 But when I try to open this "url" it gives 404 Is it suppose to behave this way? – Atul Bhatt Jul 13 '22 at 06:30
  • You should have `blob:` in front of this URL, so something like `blob:http://localhost:3000/e3ee1204-f1c4-4905-bb21-1fd12a450199` – Kaiido Jul 13 '22 at 06:33
  • Yeah! Thanks buddy ;) I can see that image now. – Atul Bhatt Jul 13 '22 at 07:00