Nodejs学习中,网页中的图片出不来了，求教

Nodejs学习中,网页中的图片出不来了，求教

具体情况是这样， 我的 public 文件夹作为 static

app.use(express.static(path.join(__dirname, 'public')));

public/

| bootstrap
| javascripts
| images

我发现 在 images 中的图片浏览器获取不到，但是，在 bootstrap/img/ 中的图片就可以，我也测试过和图片后缀名，图片大小无关。 images 中图片请求 在 控制台中输出：

GET /images/sample_photo_02.jpg 200 120014ms

bootstrap 中图片请求 在 控制台中输出:

GET /bootstrap/img/test1.jpg 200 5ms - 23.17kb

所以我觉得 是 app.js 的什么配置上出了问题。可是 毫无头绪，


2 回复

Nodejs学习中,网页中的图片出不来了，求教

具体情况是这样：

我在项目中使用了 Express 来处理静态文件，并且将 public 文件夹设置为静态资源目录。然而，我发现位于 public/images 目录下的图片无法正常加载，而位于 public/bootstrap/img 目录下的图片却可以正常加载。

我的代码如下：

const express = require('express');
const path = require('path');

const app = express();

// 设置静态资源目录
app.use(express.static(path.join(__dirname, 'public')));

// 启动服务器
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

public 文件夹结构如下：

public/
  | bootstrap
  |   | img
  |   |   | test1.jpg
  | javascripts
  | images
  |   | sample_photo_02.jpg

控制台输出

在浏览器控制台中，我看到以下输出：

  • images 中图片请求：
GET /images/sample_photo_02.jpg 200 120014ms
  • bootstrap 中图片请求：
GET /bootstrap/img/test1.jpg 200 5ms - 23.17kb

从上述输出可以看出，images 中的图片请求时间异常长（120014ms），这可能是因为请求没有正确响应或者路径有问题。

分析与解决方法

  1. 检查路径问题： 确保 images 目录下的图片路径是正确的。例如，如果图片路径是 /images/sample_photo_02.jpg，那么在 HTML 中引用时应该这样写：

    <img src="/images/sample_photo_02.jpg" alt="Sample Photo">

  2. 检查中间件顺序： 确认中间件的顺序是否正确。通常情况下，设置静态资源目录的中间件应该放在路由中间件之前。

  3. 检查文件权限： 确保 public/images 目录及其文件具有正确的读取权限。

  4. 日志调试： 添加一些日志来确认 Express 是否正确处理了请求。例如：

    app.use((req, res, next) => {
  console.log(`Request for ${req.url}`);
  next();
});

app.use(express.static(path.join(__dirname, 'public')));

通过以上步骤，你应该能够找到并解决图片无法加载的问题。如果问题仍然存在，请进一步检查其他配置或环境问题。


根据你的描述，public/images 中的图片无法访问，而 public/bootstrap/img 中的图片可以正常访问。这可能是因为路径配置或者文件权限问题。以下是一些排查和解决这个问题的方法：

1. 检查路径配置

确保你的 express.static 中的路径配置正确。你可以尝试显式指定 public/images 路径：

app.use('/images', express.static(path.join(__dirname, 'public/images')));

2. 检查文件权限

确保 public/images 目录及其包含的文件具有正确的读取权限。

3. 查看日志信息

确保没有其他中间件或路由拦截了对 public/images 目录的请求。你可以在 app.use 之前添加一些调试信息来确认请求路径：

app.use((req, res, next) => {
    console.log(`Request for ${req.url}`);
    next();
});

app.use(express.static(path.join(__dirname, 'public')));

示例代码

假设你的目录结构如下：

project-root/
  |- app.js
  |- public/
      |- images/
          |- sample_photo_02.jpg
      |- bootstrap/
          |- img/
              |- test1.jpg

app.js 可以修改为：

const express = require('express');
const path = require('path');

const app = express();

// 添加调试信息
app.use((req, res, next) => {
    console.log(`Request for ${req.url}`);
    next();
});

// 静态资源路径配置
app.use('/images', express.static(path.join(__dirname, 'public/images')));
app.use('/bootstrap', express.static(path.join(__dirname, 'public/bootstrap')));

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

通过上述方法，你应该能够找到并解决问题所在。如果问题仍然存在，请检查是否有其他网络或服务器配置影响了请求。

回到顶部