绝对路径url不能在img源HTML元素上工作

Question

我正在构建一个使用html-pdf构建报告的节点模块。我有一个html文件，我试图通过以下方式访问图像:

这些图像在src/templates/下，捆绑为dist/templates。这应该从nextjs应用程序中使用。

我注意到的是，绝对路径为我工作，我的意思是，如果我打印它指向图像。对于完整路径:我正在做path.join(__dirname, "templates", "header-footer.png")

tsconfig.json

{
"include": ["src", "types"],
"compilerOptions": {
"target": "esnext",
"module": "commonjs",
"lib": ["dom", "esnext"],
"esModuleInterop": true,
"importHelpers": true,
"sourceMap": true,
"declaration": true,
"moduleResolution": "node",
"skipLibCheck": true,
"rootDir": "./src",
"outDir": "./dist",
"strict": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"noUnusedLocals": true,
"noUnusedParameters": true
}
}

关于这个有什么线索吗?

我也尝试使用一个URL相对于网站的根目录su

<img src="/templates/header-footer.png" />

Answer 1

所以，经过几天的思考，我发现我必须在lib选项中定义一个基本路径，如下

var options = {
format: "A4",
base: "file:///" + __dirname + "/",
localUrlAccess: true, // set this to true to enable local file access
};

和在我的HTML中将文件称为:

src="templates/header-logo.png"

这工作。