cannot display images fetched from backend in Reactjs

Question

I am trying to display images fetched from backend and I am able to display all the data except the images,

Below is the response which I got when I console.log the response,

[
{
    "_id": "60a8b70be6384c8052fcc2e0",
    "name": "chan",
    "company": "micro",
    "profile": "uploads\\old.png",
    "__v": 0
},
{
    "_id": "60a8b80fe6384c8052fcc2e1",
    "name": "tucker",
    "company": "honda",
    "profile": "uploads\\employee.png",
    "__v": 0
},
{
    "_id": "60a8b84be6384c8052fcc2e2",
    "name": "emma",
    "company": "techsoft",
    "profile": "uploads\\girl.png",
    "__v": 0
},
{
    "_id": "60a8c004e6384c8052fcc2e3",
    "name": "amy",
    "company": "tec in",
    "profile": "uploads\\lady.jpg",
    "__v": 0
},
{
    "_id": "60a8d07627915c1e2429a8a2",
    "name": "tom",
    "company": "mil tech",
    "profile": "uploads\\tom-hardy.jpg",
    "__v": 0
}

]

This is the code I am trying to display images only People.js,

import React, {useEffect} from 'react'
import {connect} from 'react-redux'
import {startGetPeople} from '../actions/peopleAction'

function People({people:{people}, startGetPeople}){
useEffect(() => {
    startGetPeople()
}, [])
return(
    console.log('from People', people),
    <div className="container">
        <h2>People</h2>
        <ul>
        {
            people.map((people) => {
                return(
                    <li><img src={people.profile} style={{width: '30px', height: '30px'}}/></li>
                )
            })
        }
        </ul>
    </div>
 )
 }
 const mapStateToProps = (state) => ({
 people: state.people
 })
 export default connect(mapStateToProps, {startGetPeople})(People)

And my structure of my directory is here

project-> uploads-> images

project-> client-> src-> components-> People.js

It seems like `client` is a `react` project and you are trying to access the files outside project. Move your uploads folder to react project's public folder and check this [link](https://stackoverflow.com/questions/47196800/reactjs-and-images-in-public-folder) — Akhil, May 29 '21 at 08:00
Have you tried anything to fix this? You'll just need to replace `\\` with `\` and use relative paths `../../../${people.profile}` in your case, or if you have an alias to your `src` folder you can use that with something like `@/people.profile` — painotpi, May 29 '21 at 08:01
Does the HTTP gets placed to fetch the image or is the call not triggered at all? — Alagarasan M, May 29 '21 at 08:30
I tried adding relative path too like this ../../../${people.profile} but didn't work — Puneeth R Gowda, May 29 '21 at 09:19

ulou · Accepted Answer · 2021-05-29T08:06:00.670

0

You cannot access files that are out of you project baseUrl. baseUrl is determined by package.json, so in most cases it's (unless you will change it, but you cannot level up from there anyway) /src. You should move your images somewhere in src, e.g. project/client/src/upload/images.

Additionally, looks like this path uploads\\employee.png has incorrect separator, it should be more like this \/ instead of \\. Anyway you can easy replace it by profile.replace(/\\/, '\/').

edited May 29 '21 at 08:06

answered May 29 '21 at 08:00

ulou

5,542
5
37
47

Thank you for the response, will try this. – Puneeth R Gowda May 29 '21 at 09:21

score 0 · Answer 2 · answered May 29 '21 at 09:29

0

If your images are served locally in react.js you can either do it as follows:

import image from '../project/images/image.png'

....

<img src={image} alt="demo"/>

OR:

<img src={window.require('../project/images/image.png')} alt="demo"/>

OR
<img src={require('../project/images/image.png')} alt="demo"/>

Let me know if it works.

answered May 29 '21 at 09:29

crispengari

7,901
7
45
53

I am not having images locally but I am fetching it from the backend. Thanks for your response – Puneeth R Gowda May 29 '21 at 09:47

cannot display images fetched from backend in Reactjs

2 Answers2