Next.js构建后新上传图片无法显示的解法正确性及更优方案咨询

我在Next.js项目中实现了管理员后台上传商品图片的功能：图片存储在项目目录的public/images路径下，仅将图片名称存入数据库。原本使用以下代码展示图片：

const PATH = process.env.NEXT_PUBLIC_IMAGES_PATH; // /images
const img = image; // 从数据库读取的图片名称

<div>
     <Image src={`${PATH}/${img}`} alt="" fill />
</div>

但项目构建完成后，上传新图片会出现加载报错：

The requested resource isn't a valid image for /images/1684186884098-567686341.png received text/html; charset=utf-8

我尝试了三种方法来解决，具体修改如下：

• 添加server.js文件，用Express托管静态图片资源：

const express = require("express");
const next = require("next");

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.use("/images", express.static(__dirname + "/public/images"));

  server.all("*", (req, res) => {
    return handle(req, res);
  });
  server.listen(port, (err) => {
    if (err) throw err;
    console.log(`> Ready on http://localhost:${port}`);
  });
});

• 在next.config.js中配置图片域名白名单：

const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ["mydomain.com"],
  },
};

• 修改组件中的图片路径拼接逻辑，使用完整域名：

const PATH = process.env.NEXT_PUBLIC_IMAGES_PATH; // /images
const DOMAIN = process.env.NEXT_PUBLIC_DOMAIN; // mydomain.com
const img = image; // 从数据库读取的图片名称

<div>
      <Image src={`${DOMAIN}/${PATH}/${img}`} alt="" fill />
</div>

作为Next.js初学者，我不确定当前的解法是否合理，想了解有没有更优的实现方案。

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