如何用Node.js+React.js展示图片？Express静态资源服务故障排查

我需要在React前端展示存储在PostgreSQL数据库里的图片文件名对应的静态图片，搭建Express服务器提供静态服务后仍无法加载，相关代码如下：

ProductCard组件 #

import React, { useEffect, useState } from "react";
import axios from "../config/axios";
import ProductItem from "./ProductItem";

function ProductCard() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    const getData = async () => {
      try {
        const response = await axios.get("/api/product");
        setProducts(response.data);
      } catch (error) {
        console.error("Error fetching product data:", error);
      }
    };

    getData();
  }, []);

  return (
    <>
      {products?.map((el) => {
        return (
          <ProductItem
            key={el?.id}
            src={el?.img}
            name={el?.name}
            description={el?.description}
            price={el?.price}
            file={el?.file}
          />
        );
      })}
    </>
  );
}

export default ProductCard;

ProductItem组件 #

import React from "react";
import { Card } from "antd";
const { Meta } = Card;

function ProductItem({ name, description, price, file }) {
  console.log(file);
  return (
    <>
      <Card
        hoverable
        style={{ width: 240 }}
        cover={<img alt="example" src={file} />}
      >
        <Meta title={name} description={description} />
        <p className="mt-2 flex justify-end">{price}</p>
      </Card>
    </>
  );
}

export default ProductItem;

打印file得到的内容：

1696953634614-281617729calendar1.jpg
1696953636442-290084764calendar1.jpg
1696953636442-290084764calendar1.jpg

Express服务端代码 #

const express = require("express");
const cors = require("cors");
const morgan = require("morgan");
const bodyParse = require("body-parser");

const authRoute = require("./routes/authRoute");
const productRoute = require("./routes/productRoute");
const userRoute = require("./routes/userRoute");
const path = require("path");
const app = express();

app.use(cors());
app.use(morgan("dev"));
app.use(bodyParse.json({ limit: "10mb" }));
app.use("/assets", express.static("/assets"));
app.use(express.json());

app.use("/", authRoute);
app.use("/api", productRoute);
app.use("/users", userRoute);

app.use("/assets", express.static(path.join(__dirname, "assets")));

const port = process.env.PORT || 8000;

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

问题原因 #

前端直接将数据库返回的文件名作为img的src属性值，浏览器会将其解析为相对于当前页面的路径，而非指向Express服务器的静态资源服务地址，导致无法正确请求到图片。

修复方案 #

修改ProductItem组件中img的src属性，拼接完整的Express静态资源服务URL：

cover={<img alt="example" src={`http://localhost:8000/assets/${file}`} />}

内容的提问来源于stack exchange，提问作者Avacai