为什么这不渲染我的图像？即使 src 是正确的

Question

我正在尝试使用 multer 和 React 构建一个图像上传器，我已经正确地完成了这项工作，因为图像已正确上传到数据库。问题是当我尝试渲染 src 中的图像时。正如您在这里看到的，我尝试通过设置以下代码来渲染图像：

我已设置为图像的文件夹 trainfitbackend/uploads/name，因为我将图像存储在该文件夹中，但它们并未渲染。

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

完整代码如下：

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

Answer 1

在聊天中的讨论中已解决 How to fetch images from node.js server's folder in URL?

图像已移至 public 文件夹

为什么这不渲染我的图像？即使 src 是正确的

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

reactjs

multer