EJS模板中header标签内图片无法显示的问题求助

问题根源 #

• 静态文件服务路径配置错误：app.js中指定的静态文件目录是根目录下的assets，但实际图片存放在views/assets文件夹中
• 图片引用路径错误：form.ejs里的src="/views/univ.png"不符合静态服务的访问规则

修复步骤 #

1. 修正静态文件服务配置 #

替换app.js中的静态服务配置代码，将目录指向views/assets，同时添加/assets作为访问前缀：

// 替换原静态服务配置行
app.use('/assets', express.static(path.join(__dirname, 'views', 'assets')));

2. 修正form.ejs中的图片路径 #

更新img标签的src为静态服务的正确路径：

<header>
    <div class="header">
         <img src="/assets/univ.png" alt="University Logo">
        <div class="header-text">
            <div class="main-title">University of the Philippines Baguio</div>
            <div class="sub-title">Graduate Program Office</div>
        </div>
    </div>
</header>

验证 #

重启Node.js服务，访问http://localhost:3000，检查header中的图片是否正常显示。如果pdfTemplate.ejs中也有图片引用，需按相同规则修改路径。

内容的提问来源于stack exchange，提问作者Juan Miguel Ramos