EJS 页面未加载图像

问题描述 投票:0回答:3

我是 node.js 的新手,对于这个项目,我试图在 ejs 文件上加载图像。图像位于公用文件夹中,但仍未在 .ejs 文件中显示图像。如果我调用图像 url 为 localhost:3000/public/images/bmLogo.png 的项目,它会显示图像。但是,如果我在 ejs 文件上将 url 称为 src="/images/bmLogo.png",它不会显示图像。有没有办法在 .ejs 文件上显示图像?

文件夹路径

-- views
   -report-template.ejs
-- public
   -images
     -bmLogo.png
app.js

View 文件夹包含 report-template.ejs 和 public 文件夹,其中包含 images/bmLogo.png .

App.js

let express = require("express");
let app = express();
let ejs = require("ejs");
let pdf = require("html-pdf");
let path = require("path");

app.use('/public/', express.static('./public'));

report-template.js

<!DOCTYPE html>
<html>
    <head></head>
    <body style="background-color:white; margin-top: -1.5%;">
            <div>
                <img src="/images/bmLogo.png" style="color:black;" alt="image name">
                <p>MIS Pictures</p>
            </div>
    </body>
</html>
node.js express ejs html-pdf
3个回答
4
投票

所以,你在 app.js 中有这段代码:

app.use('/public/', express.static('./public'));

路径将是

/public/images/bmLogo.png
,而不是
/images/bmLogo.png
因此,对于
src
属性,您可以将其更改为
/public/images/bmLogo.png
。 或者,您可以做
app.use(express.static("public"))
而不是
app.use('/public/', express.static('./public'));


0
投票

我遇到了类似的问题,按照这些步骤操作,仍然没有任何进展。尝试了所有方法后,我将文件从 .jpg 更改为 .png,它开始工作了。

(这在技术上不是帖子的答案,但我想把它放在那里,因为如果其他人遇到这个问题而我没有发表评论的名誉)


0
投票

正如我所测试的,通常 node.js 使用“path.join()”和“process.cwd()”函数来定义文件路径是最佳实践。您可以提供静态文件,例如中间件:

app.use(express.static(path.join(process.cwd(), "/images")));

此中间件提供“/images”文件夹中的静态文件。

process.cwd()
功能是使路径从根文件夹开始。它在我部署到渲染器时按预期工作。

© www.soinside.com 2019 - 2024. All rights reserved.