Nodejs 我是菜鸟第三集: ejs中 img标签 src路径的问题

Nodejs 我是菜鸟第三集: ejs中 img标签 src路径的问题

如题 假设的我的项目叫project 我有一是文件在 /project/views/index.ejs 而在这个index.ejs中 我有以下语句 <img class=“fiximg” alt="" src="…/public/images/client/picture.png" /> 我的图片的路径是/project/public/images/client/picture.png

经过我的反复尝试 这个图片就是显示不出来 而我建立了一个/project/views/TestPicturePath.html 里面同样有<img class=“fiximg” alt="" src="…/public/images/client/picture.png" /> 这个图片就可以显示出来

请问这是为什么呢? 如果可以 我还想知道我的路径如何写才能让这个图片在index.ejs中显示出来


3 回复

Node.js 我是菜鸟第三集: EJS 中 img 标签 src 路径的问题

问题描述

假设你的项目名为 project。在 /project/views/index.ejs 文件中，你有一个 img 标签如下：

<img class="fiximg" alt="" src="../public/images/client/picture.png" />

然而，这张图片无法正常显示。但是当你创建一个单独的 HTML 文件 /project/views/TestPicturePath.html 并使用相同的 img 标签时，图片却能正常显示。

问题分析

这个问题可能与 EJS 渲染机制以及 Express 框架的静态文件服务有关。在 EJS 文件中，路径解析方式可能会有所不同。

解决方案

为了确保 img 标签中的 src 能正确地指向图片资源，你需要确保静态文件服务已经配置好，并且路径正确。

  1. 配置静态文件服务 确保你在 Express 应用中已经配置了静态文件服务。通常情况下，你会在应用启动时添加如下代码：

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

const app = express();

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

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

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

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

  2. 调整路径 在 index.ejs 中，你可以直接使用相对路径或绝对路径来引用图片。如果 public 目录位于根目录下，你可以简化路径：

    <img class="fiximg" alt="" src="/images/client/picture.png" />

    或者保持原来的路径，但确保路径是正确的：

    <img class="fiximg" alt="" src="../public/images/client/picture.png" />

示例代码

完整的项目结构如下：

/project
├── public
│   └── images
│       └── client
│           └── picture.png
├── views
│   ├── index.ejs
│   └── TestPicturePath.html
└── app.js

app.js:

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

const app = express();

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

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

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

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

index.ejs:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index Page</title>
</head>
<body>
    <img class="fiximg" alt="" src="/images/client/picture.png" />
</body>
</html>

通过上述配置和路径调整，你应该能够在 index.ejs 中正确显示图片。


要确定 /project/public/index.html 是否存在，如果存在请删除掉。这样才能让 /project/views/index.ejs 正常显示。

在 EJS 模板引擎中，<img> 标签的 src 属性路径问题通常是由于相对路径与服务器静态资源路径配置不匹配导致的。你需要确保路径正确，并且服务器已正确配置以提供静态资源。

示例代码

假设你的项目结构如下：

/project
    /public
        /images
            /client
                picture.png
    /views
        index.ejs

正确配置 Express 服务器以提供静态资源

在你的 Express 应用中，你需要配置静态资源路径：

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

const app = express();
const PORT = 3000;

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

// 渲染 EJS 模板
app.set('view engine', 'ejs');

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

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

在 index.ejs 中使用正确的路径

在 index.ejs 文件中，你可以使用如下路径来引用图片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example Page</title>
</head>
<body>
    <img class="fiximg" alt="" src="/images/client/picture.png" />
</body>
</html>

解释

  1. 静态资源路径配置：使用 express.static 中间件将 public 目录设置为静态资源目录。
  2. 路径编写：在 index.ejs 中，直接使用从 public 目录开始的相对路径 /images/client/picture.png。

这样配置后，Express 会处理静态资源请求，并且 <img> 标签中的路径也会正确指向实际的图片文件。

如果图片仍然无法显示，请检查控制台是否有任何错误信息（如 404 错误），这有助于进一步诊断问题。

回到顶部