通过按下按钮并使用它的本地路径在 React 中显示本地图像

Question

I'm following an online course and faced a tricky issue for me:

The final project (using React and an API) takes a link of an online 'jpg' photo so that when you press a button it displays that photo and recognize the faces on it. I want to apply this for my own local images on my PC as well but failed to figure out the way. I need at least to be able to display a local image when providing it's local path then pressing the button. Please Help!

The files are as follows (by brief of course):

App.js

import React from 'react'
import FaceRecognition from './components/FaceRecognition/FaceRecognition';
render() {
    return (
    <div className="App">
      <ImageLinkForm onInputChange={this.onInputChange} onButtonSubmit={this.onButtonSubmit}/>
      <FaceRecognition box={this.state.box} imageUrl={this.state.imageUrl}/>
    </div>
    );
  }
export default App;

ImageLinkForm.js

import React from 'react'
const ImageLinkForm = ({onInputChange, onButtonSubmit}) => {
    return (
        <div>
            <input className="f4 pa2 w-70 center" type="text" onChange={onInputChange}/>
            <button className="w-30 grow f4 link ph3 pv2 dib white bg-light-purple" onClick={onButtonSubmit}>Detect</button>
        </div>
    )
}
export default ImageLinkForm

FaceRecognition.js

import React from 'react'
const FaceRecognition = ({ imageUrl, box }) => {
    return (
        <div className="center ma">
            <div className="absolute mt2">
                <img id="inputimage" alt="" src={imageUrl} width="500px" height="auto"/>
            </div>
        </div>
    )
}
export default FaceRecognition

So as you can see the imageUrl is taken from the input text, and transferred as a parameter to FaceRecognition.js , then it is given as src to the img . My Problem is that if I'm using a local file like ( my_image.jpg ) this procedure is not working. I put ( my_image.jpg ) in the input text and press the button but the photo is not displayed at all. I even tried ( ./my_image.jpg ), ( http://localhost:3000/image.jpg ), ( http://localhost/image.jpg ), ( file:///my_image.jpg ) and other stuff etc but never succeeded.

Any idea how to fix this issue in React? I want to display a local image by using it's path in my application, so it is not a fixed image every time. I know that using import (import image from my_image.jpg ) can allow me to import a specific image and then display it by using <img src={image} /> but here the application is dynamic and should be applied on different images every time depending on the path I enter in the input text.

Thanks in advance

Answer 1

The reason is that the src property of the img component is not looking for a string path on disk. When you use the input tag type of file , you are getting back a location to a file but you're in need of a blob file object in memory.

So in order to display the image, you need to create a blob URI from that path and then set that to the img src property appropriately.

//inside your input onChange event...
var fileName = event.target.value; //<==== just the name
var fileBlob = URL.createObjectURL(event.target.files[0]); //<==== the actual file object

You can now set fileBlob to a piece of State and set

<img src={mystate} alt='something'/>