ガジェット中で使うイメージファイル

Bloggerにはイメージなどの共有ファイルをアップする機能が無い。
投稿中にイメージを含めることは出来ますが、ガジェット中でイメージファイルを使おうとすると、そのイメージファイルは別の所から参照するしか無いらしい。

う～ん、別のところからって結構面倒くさい。私自身、イメージは多用しないタイプですが、多用しないので、少ないイメージファイルを別の所で管理する事がかえって煩わしい。
仕方ないので、時々しか使わないイメージはBase64で埋め込む事にしました。ページ中で使い回す時はJavaScriptで埋め込んで使い回す事にしました。

１．使い回す場合の例

<img id="img1" width="200" height="200">  

<img id="img2" width="200" height="200">  

<script>

var data = "data:image/jpeg;base64,/9j/4AAQS...";

(function setBase64(){

  document.getElementById("img1").src = data;

  document.getElementById("img2").src = data;

});

</script>

２．HTMLに直接埋め込む場合

<img src="data:image/png;base64,iVBORw0KGgoA・・・" />

３．CSSで背景として埋め込む場合

div {

  background: url("data:image/png;base64,iVBORw0KGgoA・・・");

}