如何在 img src 中指定图像本地路径以在 react/JavaScript 中加载

Question

Suppose I have to take an image from my local path & the path value is coming from API and I have taken that path in constant and trying to add that path in my image src to show on the page.

Example:

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 is throwing an error like Not allowed to load local resource: file:///E:/myPic/IMG_20191221_204716.jpg

I have tried different options as suggested by other users like

1. Spanning a local server and then try to access file then
2. c:\Program Files (x86)\google\chrome\Application\chrome.exe --allow-file-access-from-files

The first option works but is not useful in my use case the second one doesn't work at all. also tried installing some plugin and all do not work.

Any further guidance is appreciated.

Answer 1

not sure if im undrestood well ur pb but i think u should add file to ur project src folder or somewhere and import image like component:

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