why is this not rendering my image? Even when the src is correct

Question

I'm trying to build a image uploader with multer and React, I've done this correctly, as the images upload correctly to the database. The problem is when I try to render the images in the src. As you can see in here, I've tried to render the images by setting this code:

I've set to the folder trainfitbackend/uploads/name of the image as it is where I have the images stored but they are not rendering.

{`../trainfitbackend/uploads/${client.image}`}

Here is the full code:

import React, {useState, useEffect} from 'react'
import axios from 'axios'
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
  } from "react-router-dom";
import ClientForm from './clientform.js'

function Clients() {

    const [data, setData] = useState([])

    useEffect(() => {
        axios.get('http://localhost:4000/clients')
        .then(res => setData(res.data))
    }, [])
    console.log(data)
    return (
        <div>
            <Link to="/addClient"><button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">New Client</button></Link>
            <div class="min-h-screen bg-gray-100 flex flex-row">
            <div class="container flex flex-row">
        {data.map((client) => {
                return (
                      <div class="max-w-sm py-32">
                        <div class="bg-white relative shadow-lg hover:shadow-xl transition duration-500 rounded-lg">
                          <img class="rounded-t-lg" src={`../trainfitbackend/uploads/${client.image}`} alt="" /> 
                          <div class="py-6 px-8 rounded-lg bg-white">
                            <h1 class="text-gray-700 font-bold text-2xl mb-3 hover:text-gray-900 hover:cursor-pointer">{client.firstName}</h1>
                            <p class="text-gray-700 tracking-wide">{client.lastName}</p>
                            <Link to={`Clients/${client._id}`}><button class="mt-6 py-2 px-4 bg-yellow-400 text-gray-800 font-bold rounded-lg shadow-md hover:shadow-lg transition duration-300">See more details</button></Link>
                          </div>
                        </div>
                      </div>  
                )
            })}
               </div>   
              </div>
        </div>
    )
}

export default Clients

what is the src of image you see in the browser in DevTools? Probably it has http protocol and not `file` protocol for your local images — Oro, Aug 23 '21 at 11:34
if you're planning to store your file on local machine you have to use in src string with file protocol — Oro, Aug 23 '21 at 12:32
you need to handle your request from front-end for getting images by using some static server, read more here https://stackoverflow.com/questions/27046456/how-to-fetch-images-from-node-js-servers-folder-in-url — Oro, Aug 23 '21 at 12:37
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/236316/discussion-between-raman-nikitsenka-and-chen). — Oro, Aug 23 '21 at 12:38

score 1 · Accepted Answer · answered Aug 23 '21 at 14:19

1

It was resolved during a discussion in the chat How to fetch images from node.js server's folder in URL?

Images was moved to public folder

answered Aug 23 '21 at 14:19

Oro

2,250
1
6
22

why is this not rendering my image? Even when the src is correct

1 Answers1