How to specify image local path in img src to load in 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

Spanning a local server and then try to access file then
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.

b3hr4d · Accepted Answer · 2020-12-06 07:38:43Z

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";

answered Dec 6, 2020 at 7:38

b3hr4d

4,6381 gold badge13 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Hot_Pink_Spin Over a year ago

yeah i think thats what his doubt is. './' specifies the root directory of the app, we can start relatively from the root directory by starting from './' instead of whole path.

Hot_Pink_Spin Over a year ago

I think,chrome cant load resources out of app directory and that leaded to that error

Alok Ranjan Over a year ago

Adding the file to the project is fine, but to add that file I need that file from my local file system. I can't manually add that file because I do not have either file or file path beforehand. Only based on file path like('E:/myPic/IMG_20191221_204716.jpg') is coming dynamically from API and based on that I need to access file-based on the path in my system

Alok Ranjan Over a year ago

@Hot_Pink_Spin, I understand that chrome cant load resources out of app directory... But is there an alternate way like any way I am getting path from API, so by taking that path, can we access the image and put it in our app root directory.

Hot_Pink_Spin Over a year ago

Or maybe u have to reconfigure that api, to point towards app directory.

|

Collectives™ on Stack Overflow

How to specify image local path in img src to load in react/JavaScript

1 Answer 1

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Related