如何在 img src 中指定圖像本地路徑以在 react/JavaScript 中加載

Question

假設我必須從我的本地路徑中獲取圖像並且路徑值來自 API 並且我已經采用了該路徑並嘗試在我的圖像 src 中添加該路徑以顯示在頁面上。

例子：

import React, {Component} from 'react';

class ImageElement extends Component {
    static displayName = 'ImageElement';

    render() {
        const {element:{defaultPath, height, width}} = this.props;
        const imagePath = 'E:/myPic/IMG_20191221_204716.jpg';
        return (
            <div>
                <img
                    src={imagePath}
                    height={height}
                    width={width}
                />
            </div>
        );
    }
}

export default ImageElement;

Chrome 會拋出一個錯誤，例如Not allowed to load local resource: file:///E:/myPic/IMG_20191221_204716.jpg

我嘗試了其他用戶建議的不同選項，例如

1. 跨越本地服務器，然后嘗試訪問文件
2. c:\Program Files (x86)\google\chrome\Application\chrome.exe --allow-file-access-from-files

第一個選項有效，但在我的用例中沒有用，第二個根本不起作用。 還嘗試安裝一些插件，但都不起作用。

任何進一步的指導表示贊賞。

Answer 1

不確定我是否很好地恢復了你的 pb，但我認為你應該將文件添加到你的項目 src 文件夾或某處並導入像組件這樣的圖像：

import imagePath from "./assets/img/IMG_20191221_204716.jpg";