Search code examples
javascriptchromium

Chromium createObjectUrl from Image comes out as net::ERR_FILE_NOT_FOUND

I know that my code works because I have been using it in firefox. When I switched to chrome, this code snippet has stopped working due to chrome unable to read the url generated by URL.createObjectURL().

export const image_preview = () => {
  $('.js-thumbnail').off()
  $('.js-thumbnail').on('change', function(event) {
    // add event to each file input
    const img = $(this).siblings('img')
    const url = URL.createObjectURL(event.target.files[0]) // url to user's image
    img.attr('src', url)
    URL.revokeObjectURL(url) // free the allocated object
  })
}

The url itself is generated but chromium fails to load it in my image tag. error

Some posts suggests to use webkitURL api instead of URL but that didn't work either. Do you know the cause? Is this also a problem in other browsers as well?

Solution

  • You need to wait for the image has loaded before revoking its URL.

    Image resources begin to load in a microtask after we set their src (among other reasons to allow setting crossOrigin properties after we set the src), so when the browser will read the src change, the line URL.revokeObjectURL(url) will already have been called, and the blob:// URL already pointing to nowhere.

    So simply do

        const img = $(this).siblings('img')
    const url = URL.createObjectURL(event.target.files[0]) // url to user's image
    img.attr('src', url)
    img.one('load', (e) => { URL.revokeObjectURL(url); });