Nodejs 求解答，视图文件内图片链接正确，但是图片不显示，模板用的ejs。谢谢！

Nodejs 求解答，视图文件内图片链接正确，但是图片不显示，模板用的ejs。谢谢！

求解答，视图文件内图片链接正确，但是图片不显示，模板用的ejs。express 进行的开发。谢谢！

3 回复

当然可以。遇到在EJS模板中图片无法显示的问题时，通常可能是因为路径配置错误、静态文件未正确设置或者EJS渲染过程中出现了问题。以下是一些可能的原因和解决方法：

1. 确认静态文件目录设置

确保你的Express应用已经正确设置了静态文件目录。你可以在你的主服务器文件（如app.js或server.js）中添加如下代码：

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

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

// EJS模板引擎设置
app.set('view engine', 'ejs');

在这个例子中，假设你的图片存放在项目根目录下的public/images文件夹中。

2. 检查EJS模板中的图片路径

确认你在EJS模板中引用图片的路径是否正确。例如，如果你的图片位于public/images目录下，你应该这样引用图片：

<img src="/images/your-image.jpg" alt="Your Image">

确保路径前的斜杠 / 正确无误，这表示从静态文件目录的根开始查找。

3. 确认图片文件名和路径正确

有时候问题可能出在图片文件名或路径的拼写错误上。检查public/images目录下的实际文件名是否与EJS模板中引用的一致。

示例代码

假设你的项目结构如下：

project-root/
├── public/
│   └── images/
│       └── your-image.jpg
├── views/
│   └── index.ejs
├── app.js

app.js:

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

const app = express();

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

// 设置EJS作为视图引擎
app.set('view engine', 'ejs');

// 渲染主页
app.get('/', (req, res) => {
    res.render('index');
});

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

views/index.ejs:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Display Example</title>
</head>
<body>
    <img src="/images/your-image.jpg" alt="Your Image">
</body>
</html>

通过以上步骤，你应该能够解决EJS模板中图片不显示的问题。如果问题仍然存在，请检查控制台是否有其他错误信息，或者尝试清除浏览器缓存。


用了静态服务吗？ 类似 app.use(express.static(path.join(__dirname, ‘public’)));

当在EJS模板中使用正确的图片链接但图片仍然无法显示时，可能是因为以下几种常见原因：

  1. 文件路径错误：检查图片是否放置在正确的目录中，并且路径是否正确。
  2. 服务器静态文件配置问题：确保你的Express应用已正确配置以提供静态文件服务。

示例代码

假设你将图片存放在 public/images 目录下，你可以按照以下步骤配置Express应用，并在EJS模板中引用图片。

配置Express以提供静态文件服务

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

const app = express();

// 静态文件服务配置
app.use(express.static(path.join(__dirname, 'public')));

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    res.render('index', { /* 数据对象 */ });
});

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

上述代码配置了Express以提供位于项目根目录下的 public 文件夹内的静态文件。

在EJS模板中引用图片

假设你的EJS模板名为 index.ejs 并且你想在该模板中引用一张名为 example.jpg 的图片：

<!-- index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="/images/example.jpg" alt="Example Image">
</body>
</html>

检查路径

确保public/images/example.jpg文件确实存在。如果图片路径或文件名有任何拼写错误，都会导致图片无法加载。

通过以上配置与检查，应该能够解决你的问题。如果问题依旧存在，请检查控制台是否有任何错误信息，这可能会提供更多线索。

回到顶部