EJS模板中card.ejs无法加载CSS及静态资源的问题求助

我正在开发一款类似Twitter截图生成工具的Letterboxd评论卡片生成器——用户提供Letterboxd评论链接后，系统抓取数据重构评论卡片，再通过Puppeteer生成截图返回。目前遇到的问题是：card.ejs模板无法引入CSS文件及图片，但相同的引入方式在result.ejs中可正常生效。

项目目录结构 #

project/
├── node_modules
├── public/
│   └── assets/
│       ├── favicon.png
│       ├── GraphikRegular.otf
│       ├── root.css
│       └── result.css
├── views/
│   ├── card.ejs
│   └── result.ejs
├── .env
├── package-lock.json
├── package.json
└── server.js

相关代码片段 #

server.js核心配置 #

const express = require("express");
const app = express();
const puppeteer = require("puppeteer");
const fs = require("fs");
const path = require("path");
const { render } = require("ejs");

// 其他导入代码

app.use(express.static("public"));
app.use(express.static("src"));

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

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

// /scrape接口及/download接口代码（略去无关部分）

card.ejs中的资源引入尝试 #

<link rel="stylesheet" href="/assets/root.css">
<link rel="stylesheet" href="/assets/card.css">
<img src="abc.jpg">

解决方案 #

• 检查资源文件存在性：从目录结构可见public/assets下无card.css，但card.ejs中引入了该文件，直接导致加载失败，需补充文件或删除无效引入语句。
• 修正图片路径：若abc.jpg存放于public/assets，需使用绝对路径/assets/abc.jpg替代相对路径abc.jpg——相对路径会因Puppeteer渲染上下文差异指向错误位置。
• 适配Puppeteer渲染的资源路径：若card.ejs通过ejs.renderToString生成HTML字符串后传给page.setContent()，静态资源相对路径无法被express静态服务识别，可二选一处理：
  1. 将资源路径改为带完整域名的绝对路径（如http://localhost:3000/assets/root.css）；
  2. 将CSS样式内联到card.ejs中，规避外部文件依赖。
• 确保Puppeteer等待资源加载完成：在page.setContent()后添加等待逻辑，保证资源加载完毕再生成截图：

  await page.setContent(renderedCardHtml);
  await page.waitForLoadEvent('networkidle0');
  

内容的提问来源于stack exchange，提问作者Garfield