logo

画像

PDF に画像を埋め込む方法は複数あり、用途に応じて最適な方法を選択できます。

ダッシュボードからのアップロード

画像ファイルをダッシュボード > ファイルからアップロードし、HTML から参照する方法です。

<!DOCTYPE html>
<html>
  <body>
    <img src="sample.png" alt="サンプル画像" />
  </body>
</html>

この方法は、ロゴなどを PDF に固定で表示する画像に適しています。一度アップロードした画像は、異なる PDF 生成時にも再利用できます。 また、サブディレクトリを使用したパスの指定(例:images/sample.png)はできず、以下の記述はすべて同じsample.pngを参照します。

<!-- 以下はすべて同じファイルを参照します -->
<img src="sample.png" alt="サンプル画像" />
<img src="./sample.png" alt="サンプル画像" />
<img src="/sample.png" alt="サンプル画像" />

外部画像の参照

既にインターネット上にホスティングされている画像を直接参照することもできます。

<!DOCTYPE html>
<html>
  <body>
    <img src="https://example.com/images/sample.png" alt="外部画像" />
  </body>
</html>

Base64 エンコード

動的に生成される画像や、PDF ごとに異なる画像を埋め込む場合は、Base64 エンコードした画像データを直接 HTML に記述できます。

<!DOCTYPE html>
<html>
  <body>
    <img src="data:image/jpeg;base64,/9j/4AAQSkZJRg..." alt="Base64画像" />
  </body>
</html>

この方法は以下のような場合に適しています:

  • QR コードなど、動的に生成される画像の埋め込み
  • ユーザーごとに異なる画像を表示する場合