如何使用File System Access API将文件内容设置为HTML IMG的src属性

你不需要获取本地文件的绝对路径，直接通过File System Access API的文件句柄生成浏览器可识别的临时Blob URL即可给img元素赋值，完全适配无服务的单HTML文件原生JS运行环境。

浏览器出于安全沙箱限制，不会向网页暴露本地文件的真实绝对路径，硬编码本地路径可运行仅为本地测试时的特殊权限场景，没有任何原生JS API可以绕过该安全限制拿到真实文件路径。

具体实现逻辑 #

• 调用showOpenFilePicker唤起系统文件选择器，获取目标图片的文件句柄，配置选择器仅允许选择图片格式文件
• 校验文件读取权限，首次访问时浏览器会自动弹出权限申请，用户授权后才可读取文件内容
• 调用文件句柄的getFile()方法，获取标准File实例，该实例和传统<input type="file">返回的文件对象完全一致
• 调用URL.createObjectURL()传入File实例，生成临时同源Blob URL，直接将该URL赋值给img元素的src属性即可正常加载图片
• 图片加载完成后调用URL.revokeObjectURL()释放临时URL占用的内存，避免不必要的内存泄漏

可直接运行的代码示例 #

<!-- 单HTML文件内可直接使用，无需任何服务 -->
<button id="selectImgBtn">选择本地图片</button>
<img id="targetImg" style="max-width: 100%;">

<script>
document.querySelector('#selectImgBtn').addEventListener('click', async () => {
  try {
    // 唤起文件选择器，限定选择图片类型
    const [fileHandle] = await window.showOpenFilePicker({
      types: [{
        description: '图片文件',
        accept: { 'image/*': ['.png', '.jpg', '.jpeg', '.gif', '.webp'] }
      }],
      multiple: false
    })

    // 校验读取权限
    if (await fileHandle.queryPermission({ mode: 'read' }) !== 'granted') {
      const permRes = await fileHandle.requestPermission({ mode: 'read' })
      if (permRes !== 'granted') throw new Error('缺少文件读取权限')
    }

    // 生成临时URL并赋值给img
    const imgFile = await fileHandle.getFile()
    const imgUrl = URL.createObjectURL(imgFile)
    const imgEl = document.querySelector('#targetImg')
    imgEl.onload = () => URL.revokeObjectURL(imgUrl) // 加载完成后释放内存
    imgEl.src = imgUrl
  } catch (e) {
    console.error('图片加载失败:', e)
  }
})
</script>

兼容性说明 #

上述方案依赖的File System Access API支持所有Chromium内核现代浏览器（Chrome 86+、Edge 86+及主流国产Chromium套壳浏览器），如果需要兼容Firefox、Safari，可降级使用传统<input type="file">元素获取File对象，后续生成Blob URL赋值给img的逻辑完全一致。

整个实现全程不需要本地或远程Web服务支持，所有逻辑都在浏览器沙箱内完成，不依赖Electron等第三方桌面框架。

内容的提问来源于stack exchange，提问作者Marc Rochkind