В сгенерированном PDF нет изображения, включенного в шаблон Handlebars

app.get('/individual_report/:athlete_id', function(req, res) {
  database.select('*').from('participants').then(data => {
    if (data.length) {
      res.render('individual_report', {
        name: data
      });
      const hbsfile = fs.readFileSync(__dirname + '/../public/views/individual_report.hbs', 'utf8');
      const document = {
        template: hbsfile,
        context: {
          options: {
            dataForPDF: data,
            ssl_logo: '../public/static/assets/image/white_ssl_logo.png',
          },

    },
    path: __dirname + '/../public/reports/' + data[0].first_name + " " + data[0].last_name + '\'s scores.pdf'
  };
  pdf.create(document, options).then(res => {
    console.log(res)
  }).catch(error => {
    console.error(error)
  });
} else {
  res.json({
    msg: 'Invalid athlete ID'
  });
}
  }).catch(err => res.sendStatus(400));
});

Вышеуказанный экспресс-маршрут узла отображает HTML-страницу, а также генерирует PDF-файл с использованием шаблона HandleBars .hbs.

<img class="ssl_logo" src="{{{options.ssl_logo}}}" alt="logo.png" width="120" height="50" />

Это то, что у меня есть в файле.hbs, который должен отображать файл изображения логотипа.

Изображение не отображается в браузере, а также в файле PDF. Однако атрибут alt отображается в браузере и в PDF. Я заглянул в консольный журнал и получил неизвестный атрибут source:

img class = "ssl_logo" src (неизвестно) alt="logo.png" width="120" height="50"

Я использую пакет узла dynamic-html-pdf для создания этого отчета, и кто-нибудь может предложить мне что-то, что могло бы сделать это? Спасибо.

2 ответа

просто попробуйте использовать файловый протокол

       ssl_logo: 'file://' + __dirname + '/public/static/assets/image/white_ssl_logo.png',

он будет работать нормально, даже изображения SVG будут сгенерированы

Welp, я собираюсь ответить на свой собственный пост. По какой-то причине этот фрагмент кода не читает локальный файл изображения, поэтому я загрузил изображение на диск Google, получил ссылку общего доступа, как Google изменить ссылку общего доступа, поскольку генерируемая ссылка не будет работать в нашем приложении. код и замените адрес файла изображения ссылкой.

Надеюсь, что это поможет тем, кто имеет или будет иметь эту проблему. (В конечном итоге вы должны решить проблему самостоятельно, haizzzz)

Другие вопросы по тегам