除非我重建 App Next JS，否则图像不会加载答案

【问题标题】：Images not loading unless I rebuild App Next JS除非我重建 App Next JS，否则图像不会加载
【发布时间】：2020-07-03 02:21:38
【问题描述】：

我最近在下一个 js 中遇到了图像问题。我知道 next 已经弃用了对 static 的支持，转而支持公共目录。所以即使在重构之后，我仍然无法加载图像。这是流程：我为一个项目选择一个图像并向服务器发送一个 axios 请求。服务器只保存 mongodb 的路径，如下所示：

  staticPath = `/ProjectImages/projImg_${req.decodedTokenData.userId}_${_id}_${key}.png`;
  let imagePath = path.normalize(__dirname + `/../../public${staticPath}`);
  dbImages.push(staticPath);

并将图像的 base64 编码值写入文件并将其保存到公共目录中的 ProjectImages 目录。现在，当我创建一个项目时，即使它引用了路径并且图像本身位于正确的位置，图像也不会加载。只有在重建应用程序后，我才能看到图像。注意：此问题仅在生产模式中不会出现在开发模式中。请帮忙！

【问题讨论】：

标签： reactjs mongodb express next.js

【解决方案1】：

马斯拉河锦鲤

而不是直接从源调用图像，我建议您创建一个路由并从那里提供所有这些图像

const express = require("express");
const router = express.Router();
const path = require('path');
const fs = require('fs');

router.get('/media/project/:path',function (req,res,next) {
    const _path = `/static/ProjectImages/${req.params.path}`;
    let imagePath = path.normalize(__dirname + `/../../public${_path}`);
    try{
        if (fs.existsSync(imagePath)) {
            res.sendFile(imagePath);
        }else{
            res.sendStatus(404);
        }
    }catch (err) {
        res.sendStatus(404);
    }
});

【讨论】：