Nodejs Express＋jade 关于显示上传图片的问题。

Node.js Express + Jade 显示上传图片问题

问题描述

你上传了一张图片，并将其路径存储为 /photo/img123.jpg。然后你重定向到另一个路由，并使用Jade模板引擎来显示位于 photo 文件夹下的所有图片。但是，你发现图片显示为损坏的图标。通过查看源代码，你确认路径是正确的。

解决方案

问题可能出在以下几个方面：

1. 静态资源路径配置：你需要确保Express能够正确地提供静态文件。
2. Jade模板中的路径问题：确保在Jade模板中正确引用了图片路径。

以下是详细的解决方案：

配置静态资源路径

首先，确保你的Express应用能够正确地提供静态文件。你可以在你的Express应用中添加以下代码：

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

const app = express();

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

// 设置views目录
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

在这个例子中，我们将 public 目录设置为静态文件目录。假设你的图片存放在 public/photo 目录下，那么路径应该是 /public/photo/img123.jpg。

修改Jade模板

接下来，在你的Jade模板中正确引用图片路径。例如：

doctype html
html
  head
    title Display Images
  body
    h1 Photos
    each img in photos
      img(src='/public/photo/' + img, alt='Photo')

在这个模板中，我们遍历 photos 数组（假设它包含了图片的文件名），并为每个图片生成一个 <img> 标签。注意路径是相对于静态文件目录的。

示例代码

完整的示例代码如下：

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

const app = express();

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

// 设置views目录
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// 假设你有一个路由处理上传的图片
app.post('/upload', (req, res) => {
  // 处理上传逻辑...
  const photos = ['img123.jpg', 'img456.jpg'];
  res.redirect('/display');
});

// 显示图片的路由
app.get('/display', (req, res) => {
  const photos = ['img123.jpg', 'img456.jpg']; // 这里从数据库或文件系统获取实际的图片列表
  res.render('display', { photos });
});

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

Jade模板文件 (views/display.jade)

doctype html
html
  head
    title Display Images
  body
    h1 Photos
    each img in photos
      img(src='/public/photo/' + img, alt='Photo')

通过以上配置和代码，你应该能够正确地在Express应用中显示上传的图片。确保你的图片确实存在于 public/photo 目录下，并且路径配置正确。