React点击按钮按输入本地路径动态加载展示本地图片问题咨询

问题根因 #

浏览器出于安全访问限制，禁止网页直接读取本地文件系统的任意路径资源，你之前尝试的file:///开头的路径会被直接拦截，非项目静态资源目录内的相对路径、本地服务路径也会因为资源不存在返回404，因此手动输入本地路径的方式不可行。

可行解决方案 #

方案1：动态加载项目内预置的本地图片 #

如果你需要加载的本地图片都是提前预置在项目内的，只需要把所有图片存放到React项目的public目录下即可：

1. 在public文件夹下新建images目录，把所有需要用到的本地图片放到这个目录里，比如my_image.jpg
2. 你只需要在输入框填写images/my_image.jpg，即可正常加载图片，完全符合动态输入路径的需求。
   原理是React的开发/生产服务都会将public目录下的所有文件作为静态资源暴露在根路由下，输入的路径匹配到静态资源即可正常加载。

方案2：支持用户任意选择本地设备图片（无需提前预置） #

如果需要支持加载用户电脑上任意位置的图片，不需要手动输入路径，直接新增文件选择输入框即可，改动量极小：

第一步：修改ImageLinkForm.js

新增文件选择输入框，支持选择本地图片文件：

import React from 'react'
const ImageLinkForm = ({onInputChange, onButtonSubmit, onFileSelect}) => {
    return (
        <div>
            {/* 原有线上链接输入框保留 */}
            <input className="f4 pa2 w-70 center" type="text" onChange={onInputChange}/>
            {/* 新增本地图片选择框 */}
            <input type="file" accept="image/jpg,image/jpeg,image/png" onChange={onFileSelect} className="db center ma2"/>
            <button className="w-30 grow f4 link ph3 pv2 dib white bg-light-purple" onClick={onButtonSubmit}>Detect</button>
        </div>
    )
}
export default ImageLinkForm

第二步：修改App.js新增文件处理逻辑

新增onFileSelect方法，将选中的本地文件转换为可直接赋值给img标签src属性的DataURL：

// 新增文件选择处理方法
onFileSelect = (e) => {
  const selectedFile = e.target.files[0]
  if (selectedFile) {
    const fileReader = new FileReader()
    fileReader.onload = (loadEvent) => {
      // 直接将转换后的DataURL存入state
      this.setState({ imageUrl: loadEvent.target.result })
    }
    fileReader.readAsDataURL(selectedFile)
  }
}

// render方法中给ImageLinkForm传递新增的props
render() {
    return (
    <div className="App">
      <ImageLinkForm 
        onInputChange={this.onInputChange} 
        onButtonSubmit={this.onButtonSubmit}
        onFileSelect={this.onFileSelect}
      />
      <FaceRecognition box={this.state.box} imageUrl={this.state.imageUrl}/>
    </div>
    );
  }

效果

修改完成后，用户既可以输入线上图片链接进行识别，也可以直接点击文件选择框选中本地任意图片，选中后即可自动加载展示，无需手动输入路径，也能正常做人脸识别计算。

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