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

Question

我正在学习一门在线课程，遇到了一个棘手的问题:

最后的项目(使用React和API)需要一个在线"jpg"照片的链接，这样当你按下一个按钮时，它会显示照片并识别照片上的面孔。我想在我的PC上应用我自己的本地图像，但没能找到方法。我需要至少能够显示本地图像时，提供它的本地路径，然后按下按钮。请帮助!

文件如下(当然是简短的):

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

因此，您可以看到，imageUrl是从输入文本中提取的，并将其作为参数传递给FaceRecognition.js，然后将其作为src传递给img。我的问题是，如果我使用像(my_image.jpg)这样的本地文件，这个过程不起作用。我把(my_image.jpg)在输入文本中，按下按钮，但照片根本不显示。我甚至尝试了(./my_image.jpg)， (http://localhost:3000/image.jpg)， (http://localhost/image.jpg)， (file:///my_image.jpg)和其他东西等，但从未成功。

任何想法如何解决这个问题在React?我想通过在我的应用程序中使用它的路径来显示本地图像，所以它不是每次都是固定的图像。我知道使用import(从my_image.jpg导入图像)可以让我导入特定的图像，然后通过使用<img src={image} />显示它，但这里的应用程序是动态的，每次应该根据我在输入文本中输入的路径应用于不同的图像。

Thanks in advance

Answer 1

原因是img组件的src属性没有在磁盘上查找字符串路径。当您使用文件的输入标记类型时，您将返回文件的位置，但您需要内存中的blob文件对象。

因此，为了显示图像，您需要从该路径创建一个blob URI，然后将其适当设置为img src属性。

//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

你现在可以将fileBlob设置为State的一部分，并设置

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