JavaScriptの変数に入っている画像データ(インラインイメージ)を表示する方法解説 JavaScriptの変数に入っている画像データを表示する方法について。 JavaScriptの変数に画像データを入れて、それを表示することができる。 htmlの中にインラインイメージとしていれてしまうと、htmlファイルのサイズを大きくなってしまうが、逆に、httpのリクエスト数を減らすことができる。使い方次第でパフォーマンスが改善できる、かも。 方法 画像をbase64でエンコードする base64した値を変数に入れる imgタグのsrcに変数につっこむ(はじめからimgのsrcに入れておいてよい) 画像をbase64エンコードする b64encode -o 64.txt input.png input.png 64.txtの中身はこんなカンジ。 begin-base64 644 input.png iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf
