为什么这不渲染我的图像？即使 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?的讨论中解决了

图片已移至公用文件夹