HTML & CSS - base64 のデータで画像ファイルを表示する

base64 のデータで画像ファイルを表示する

base64 のデータで画像ファイルを表示するには、img 要素の中に記述します。src 属性の値には data: 部と base64, 部があります。data: 部にはメディアタイプを指定し、base64, 部にはデータを指定します。

<!DOCTYPE html>
<html lang="ja">
  ...
  <img src="data:image/png;base64,aVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQUFFQUFBQUJBUU1BQUFBbDIxYktBQUFBQTFCTVZFWC8vLytueEJ2SUFBQUFDa2xFUVZRSTEyTmdBQUFBQWdBQjRpRzhNd0FBQUFCSlJVNUVya0pnZ2c9PQ==">
  ...
</html>
base64 のデータで画像ファイルを表示する - HTML

コンピュータで扱うことができるファイルは、テキストデータバイナリデータの2種類に分類できます。テキストデータは、テキストエディタなどで開くことができる文字が記されたデータです。一方でバイナリデータは、文字以外で記されたデータであり、ファイルを開くためには専用のアプリケーションが必要になります。例えば、画像ファイルのほとんどはバイナリデータになります。

base64 は、このようなバイナリデータを文字列に変換するためのフォーマットの一種です。バイナリデータを base64 形式に変換することをエンコード、base64 形式からバイナリデータに戻すことをデコードと言います。画像データを base64 形式にするためには、Web サービスを利用すると良いでしょう。

0
SHARE
Twitter
@murashun
お問い合わせ
murashun@gmail.com
ご質問(マシュマロ)
https://marshmallow-qa.com/murashun
ご支援(Stripe)
https://checkout.stripe.com/