通過按下按鈕並使用它的本地路徑在 React 中顯示本地圖像

Question

我正在學習在線課程，但遇到了一個棘手的問題：

最終項目（使用 React 和 API）獲取在線“jpg”照片的鏈接，以便當您按下按鈕時，它會顯示該照片並識別其上的面孔。 我也想將其應用於我自己的 PC 上的本地圖像，但未能找到方法。 在提供本地路徑然后按下按鈕時，我至少需要能夠顯示本地圖像。 請幫忙！

文件如下（當然是簡短的）：

應用程序.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

人臉識別.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 中解決這個問題嗎？ 我想通過在我的應用程序中使用它的路徑來顯示本地圖像，所以它不是每次都固定的圖像。 我知道使用導入（從my_image.jpg導入圖像）可以讓我導入特定圖像，然后使用<img src={image} />顯示它，但這里的應用程序是動態的，應該應用在不同的圖像上時間取決於我在輸入文本中輸入的路徑。

提前致謝

Answer 1

原因是 img 組件的 src 屬性不是在磁盤上尋找字符串路徑。 當您使用file的輸入標簽類型時，您將返回文件的位置，但您需要 memory 中的 blob 文件 object。

因此，為了顯示圖像，您需要從該路徑創建一個 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'/>