来自 Image 的 Chromium createObjectUrl 显示为 net::ERR_FILE_NOT_FOUND

Question

我知道我的代码可以工作，因为我一直在 firefox 中使用它。当我切换到 chrome 时，由于 chrome 无法读取 URL.createObjectURL() 生成的 url，此代码片段已停止工作。

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
  })
}

url 本身已生成，但 chromium 无法将其加载到我的图像标签中。

一些 posts 建议使用 webkitURL api 而不是 URL 但这也不起作用。你知道原因吗？这在其他浏览器中也是一个问题吗？

Answer 1

您需要等待图像加载完毕才能撤销其 URL。

图像资源在我们设置它们的 src 之后开始在微任务中加载（除了其他原因允许在我们设置 src 之后设置 crossOrigin 属性），所以当浏览器将读取 src 更改，行 URL.revokeObjectURL(url) 已经被调用，并且 blob:// URL 已经指向任何地方。

就这么简单

    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); });

来自 Image 的 Chromium createObjectUrl 显示为 net::ERR_FILE_NOT_FOUND

Chromium createObjectUrl from Image comes out as net::ERR_FILE_NOT_FOUND

javascript

chromium