NodeJS中EJS生成HTML转PDF时图片无法显示问题求助

我用Node.js+MySQL从数据库拉取数据，通过EJS生成HTML，再借助npm的html-pdf工具将HTML转为PDF，但PDF里的图片无法显示。图片托管在同一服务器的React项目文件夹中（路径为../html/static/media/...），而Node.js代码位于../server/..目录下。

相关代码及效果 #

EJS模板代码 #

<!DOCTYPE html>
<html lang="pt">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width:device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Imóvel <%= name %></title>
    </head>
    <body>
        <section id="header">
            <h1>Immobile</h1>
            <img src='<%= img %>' />
            <h2><%= name %></h2>
        </section>
    </body>
</html>

PDF生成代码 #

let img = media[0].url;

const name = immobile[0].name

ejs.renderFile("./immobile/pdf/index.ejs", {name:name, img:img}, (err, html) => {
    if (err) {
        console.log("error: " + err);
    } else {
        
        pdf.create(html, {}).toFile("../html/static/media/immobile.pdf", (err,response) => {

            if (err) {
                console.log("Um erro aconteceu: " + err);
            } else {
                res.json({"success":"true","url":"" + response.filename + ""});
            }

        });

    }
});

效果截图 #

PDF中图片位置显示为空白占位符，无法加载出图片内容。

解决方法 #

1. 使用绝对文件路径（推荐） #

html-pdf依赖的PhantomJS在处理本地图片时，相对路径容易解析错误，建议用Node.js的path模块生成绝对路径：

const path = require('path');

// 拼接图片的绝对路径：从server目录向上到根，再指向目标图片
let imgRelativePath = media[0].url;
let imgAbsolutePath = path.resolve(__dirname, imgRelativePath);

// 把绝对路径传给EJS
ejs.renderFile("./immobile/pdf/index.ejs", {name:name, img:imgAbsolutePath}, (err, html) => {
    // 后续生成PDF的代码不变
});

2. 配置html-pdf的base选项 #

在pdf.create的配置中指定base参数，设置资源的基础路径，让PhantomJS能正确解析相对路径：

const path = require('path');
// 基础路径设为React项目static/media目录的绝对路径
const basePath = path.resolve(__dirname, '../html/static/media');

pdf.create(html, { base: `file://${basePath}/` }).toFile("../html/static/media/immobile.pdf", (err,response) => {
    // 后续代码不变
});

此时EJS中的图片src可以直接用图片文件名，或者基于basePath的相对路径。

3. 检查文件权限 #

确保运行Node.js进程的用户拥有读取../html/static/media/目录下图片文件的权限，避免因权限不足导致无法加载图片。

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