Display image stored as a Path string in the Database in React

Question

I would like to display an image in React, that is located in the src/images folder. This image has a PATH that is stored in the database and looks like this "../images/profilepic.jpg". I make my api call, get the PATH string and save it in a state called profilepic, so far this all works correctly. I then assign the state variable to a profilepic variable, which is correctly assigned when I "console.log()" it.

The issue is that I cannot show this image on the website when I use <img src{profilepic} alt="myprofilepic"/>. I have tried almost every method suggested in past questions but none work. I have tried to pass the state this.state.profilepic, with the string PATH assigned to it, to a separate component as a prop but i still run into the same issue. Using <img src=(require{profilepic}) produces an error as require will only take a string URL.

Can anyone point me in the direction of a tutorial where an image is stored as a URL/path string in a database and is called and used in React. Even if it isn't a complete project I would like to know how this can be done from the React front-end. If this is not the recommended way to deal with dynamic images in React would it then be more advisable to store the image as a BLOB in the database and then call the actual image itself in React instead of it's PATH?

The fetch call:

getUserdetails(){
const userid = this.state.userid;
axios.get(`http://localhost:5000/getuser/details?userid=${userid}`)
.then(json => {
  if(json.data.success){
    this.setState({
        username: json.data.username,
        email: json.data.email,
        fullname: json.data.fullname,
        company: json.data.company,
        profilepic: json.data.propic
    })
    profilepic = this.state.profilepic
    console.log(profilepic)
    this.newprofile(profilepic)
  } 
})}

The Rendered output

return (

        <div className="accout-page">
            <div className="sidebar">
            <Images profpic={profilepic} />
                <p><input type="file" onChange={this.onchangeImage} /><button type="button" onClick={this.uploadimage}>Upload</button></p>
    <p>Username: {username}</p>
    <p>Full Name: {fullname}</p>
    <p>Company: {company}</p>
    <p>Email: {email}</p>
            </div>
            <div className="content">
                <h1>Edit your details here</h1>
                <div className="form-error-info">{updateMessage}</div>
                <form>
                <div className="form-group">
                <label>Full Name:</label>
                <input 
                type="text"
                placeholder={fullname}
                onChange={this.onNameChange} required/></div>
                <div className="form-group">
                <label>Company:</label>
                <input
                type="text"
                placeholder={company}
                onChange={this.onCompanyChange} required/></div>
                <div className="form-group">
                <label>Current Password:</label>
                <input
                type="password"
                placeholder="enter current password"
                onChange={this.onoPassChange} required/></div>
                <div className="form-group">
                <label>New Password:</label>
                <input
                type="password"
                placeholder="enter new password"
                onChange={this.onPassChange} required/></div>
                <button className="btn btn-light" type="button" onClick={this.onSubmit}>Update</button>
                </form>
            </div>
        </div>
    )

The Images Component:

class Images extends React.Component{

render(){

    const profpic = this.props.profpic;
    console.log(profpic)
return(
    <div>
        <img src={profpic} alt="profile pic" width="100px" height="100px" />
    </div>
)}}

Could you add snippets from your code? It is hard to understand like that. — ugurdonmez
– ugurdonmez, Commented Feb 11, 2020 at 8:44

Travnikov.dev · Accepted Answer · 2020-02-11 08:46:44Z

1

So, basically you should have shared folder 'images' on yours server and store images there. You must be able to open your images by the path like

http://localhost:8080/images/profilepic123.jpg

After that you able to use this code snippet

<img src='/images/profilepic123.jpg' alt="myprofilepic"/>

or

<img src={profilePic} alt={profileName}/>

answered Feb 11, 2020 at 8:46

Travnikov.dev

4646 silver badges14 bronze badges

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

6 Comments

Andy Golem Over a year ago

I'm a little bit confused. Would I need to put this shared images folder in the same folder as my react application? I also see above that you entered the port as 8080 but my express server which serves the api runs on port 5000 and React on port 3000

Travnikov.dev Over a year ago

If it's static images used in your app it should be in react folder and imported throw webpack loader. In your case you have images stored in database, so you should have separated from react shared image folder which served by server

Andy Golem Over a year ago

But this shouldn't be the case because if I set my source to the PATH as a string, that is: src='../images/profilepic.jpg' I am able to see the image. Why is this not the case when I set it to a variable which has the same string assigned to it?

Travnikov.dev Over a year ago

Because if you use static images in your project you should import them. Like 'import ProfilePic from "./images/profilepic.jpg" ' and then use it like '<img src={ProfilePic} />' so you won't be able to use different images from database. You can't use variables in import

Travnikov.dev Over a year ago

More to read create-react-app.dev/docs/adding-images-fonts-and-files

|

Squiggs. · Accepted Answer · 2020-02-11 08:45:23Z

0

<img src={require(`${profilepic}`)} />

I think you just need template literals

answered Feb 11, 2020 at 8:45

Squiggs.

4,5028 gold badges56 silver badges94 bronze badges

1 Comment

Andy Golem Over a year ago

This produces the following error: Cannot find module '../images/profile.jpg'

Riddhi · Accepted Answer · 2020-02-11 08:47:47Z

0

For accessing a local image path you also need to add NODE_PATH=src in your environment variable or append it to script the start key in your package.json file as below.

"start": "NODE_PATH=src react-scripts start",

answered Feb 11, 2020 at 8:47

Riddhi

2,2541 gold badge11 silver badges17 bronze badges

3 Comments

Andy Golem Over a year ago

I added the above line to my start scripts in the package.json file but got this error when trying to start the application: 'NODE_PATH' is not recognized as an internal or external command, operable program or batch file. Do I have to add this to my environment variables and if I do how should I do it, do I create a new environment variable or edit an existing one?

Riddhi Over a year ago

try doing this export NODE_PATH=src; npm start;

Riddhi Over a year ago

You can just create a new variable in your env file

mohamed ibrahim · Accepted Answer · 2020-02-11 09:35:40Z

0

Try this :

import Image from "filePath/imgName";

You can use this Icon in any line of code down. For example:

<img src={Image}/>

answered Feb 11, 2020 at 9:35

mohamed ibrahim

5835 silver badges12 bronze badges

2 Comments

Andy Golem Over a year ago

This will only work if you know the path of the image already, the image paths are stored in the database and every user has a different path associated to their profile pic because every user has a different profile picture.

Andy Golem Over a year ago

I already have the image PATH from the database and for this user it is: '../images/profile.jpg' I have saved it to a state variable but when I add it as the src to my image tag, I can't see the image on the website.

Vijay Gehlot · Accepted Answer · 2020-02-11 11:59:10Z

0

Basically, you have written right code <img src={profilepic} alt="myprofilepic"/> But the problem is that you didn't have API to open this file Like this:

const openFile = (req, res, next) => {
    File.findOne({ _id: req.params.id,path:req.params.path }, function(err, users) {
        if (err) {
            return res.status(400).json({
                error: errorHandler.getErrorMessage(err)
            });
        }
        console.log(users);
        console.log(users.path);

    });
};

//route of this controller***
router.route('/api/openfile/:id')

You can open your file

<img={`http://localhost/api/openfile/${profilepic}`}/>

answered Feb 11, 2020 at 11:59

Vijay Gehlot

802 silver badges10 bronze badges

1 Comment

Andy Golem Over a year ago

Hi Vijay I am struggling to understand this. I already have the path to the file from the DB in react, the path to the image is '../images/profile.jpg' after fetching it using axios I then save it to the variable profilepic. I am then unable to see the image in the website when I set the img src={profilepic}. But if I set the src=require(${../images/profilepic.jpg}) I can see the image

Collectives™ on Stack Overflow

Display image stored as a Path string in the Database in React

5 Answers 5

6 Comments

1 Comment

3 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

1 Comment

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related