图像未从 express 静态文件夹中加载答案

【问题标题】：image is not getting loaded from the express static Folder图像未从 express 静态文件夹中加载
【发布时间】：2022-08-15 23:57:02
【问题描述】：

正在从本地文件夹加载图像但不是来自声明为静态的上传文件夹。

我一直在尝试从浏览器上传文件，图片上传成功并保存成功但是在渲染上传文件夹中的图像时没有被渲染

来自 MongoDb 数据库的示例数据

_id:1
...
image:\"/images/mouse.jpg\"
...

_id:2
...
image:\"/uploads/image-1647229113730.jpeg\"
...

产品组件

const Product = ({ product }) => {
  return (
    <Card className=\'my-3 p-3 rounded\'>
      <Link to={`/product/${product._id}`}>
        <Card.Img src={product.image} variant=\'top\' />
      </Link>
      <Card.Body>
        ...
      </Card.Body>
    </Card>
  )
}

export default Product

文件层次结构如下

Repo
 | backend
   | server.js
 | frontend
   | public
     | images
        |mouse.jpg
 | uploads
   | image-1647229113730.jpeg

在后端的 server.js 中，我将上传文件夹设为静态

const __dirname = path.resolve();
app.use(\"/uploads\", express.static(path.join(__dirname, \"/uploads\")));

我的问题很简单

/images/mouse.jpg is accessible | /uploads/image-1647229113730.jpeg is not accessible

虽然两者都在项目文件夹中，为什么？

要解决使用express.static() 提供静态文件的问题，我们需要三件事：1) 浏览器请求的实际 URL 或向我们显示图像标签生成的 HTML（不是模板），2) 文件的位置包含express.static() 中间件调用的服务器硬盘，3) 您尝试服务器的静态文件在服务器硬盘上的位置。有了这三个信息，我们可以立即提供修复。看来我们缺少第 1 项，因为我们不知道浏览器在尝试加载图像时请求的是什么 URL。
感谢您提供宝贵的信息，因为我已经在本地主机中完成了所有操作，我们正在寻找的 url 在前端是 localhost:3000，产品是使用 localhost:5000/api/products 从后端获取的
实际上图像没有存储在 urls 中，直接路径存储在数据库中，当获取产品时，图像字段现在将具有存储在项目文件夹中的图像的路径。然后获取对应的图片，所以图片的url不仅仅是模板，它是mongoDb数据库中存储的实际url。上传功能的工作方式是将项目文件夹中的图像推送到上传文件夹中，以便将相对路径存储在数据库中，然后尝试检索。但是上传文件夹中的图像没有被检索到
实际上问题很简单，/images/mouse.jpg 是可访问的，为什么不是 /uploads/image-1647229113730.jpeg，虽然两者都在项目文件夹中
我不知道你最后的评论是什么意思。 express.static() 通过将传入 URL 的路径与文件系统中的文件进行匹配来工作。这就是它所能做的一切。它不能对您的数据库做任何事情。所以，我已经问过一次，看看您在网页中放置的 URL 是什么，导致浏览器从您的服务器请求该 URL。我们必须查看浏览器看到的生成的 HTML 才能知道它是什么。您可以在浏览器中查看/页面源以查看生成的 HTML。我重复。 express.static() 不会对您的数据库做任何事情。

标签： javascript reactjs image express filepath

【解决方案1】：

我通过手动创建一个名为 __dirname 的变量并为其分配 path.resolve() 的值来解决此问题，请参见下面的示例

import path from 'path';

const __dirname = path.resolve();

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

这解决了问题..

【讨论】：

【解决方案2】：

在您的 server.js 中，您声明 __dirname 覆盖节点为您提供的隐式声明的 __dirname。

因此，不要使用here 描述的当前工作目录 path.resolve() 的值，您不应该自己声明 __dirname 并使用节点提供的 __dirname。那是你的源文件的路径位于。

然后您可以使用 path.join(__dirname,'../uploads') 来获取上传文件夹的路径。（两个点很重要）

编辑：

对不起。我完全忘记了 __dirname 在 ES 模块中不可用......

但这是另一种可行的方法：

import { URL } from 'url';
const __dirname = new URL('.', import.meta.url).pathname;

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

【讨论】：

ReferenceError: __dirname 未在 ES 模块范围内定义
即使在更新 __dirname 后也无法正常工作