別のファイルからbase64文字列を参照する

bugfix> html > 投稿

私のhtmlページでは、画像タグ内でbase64でコード化された画像を使用しています。

<img src="data:image/jpeg;base64,/9j/4AA" />

実際のbase64コードははるかに長く、かなりの数のhtmlファイルで使用しています。上記をcssファイルまたは他のファイルに入れて、名前で参照できるようにする方法はありますか？

html

css

html5

回答 1 件

  • バイナリの代わりにbase64文字列を使用する必要がある場合、cssのような何かを行うことができます。

    .picture {
   background:
     url(data:image/jpeg;base64,/9j/4AA...)
     no-repeat
     left center;
   width: 250px;
   height: 100px;
   display: inline-block;
}

    次に、画像クラスを div に適用します  あなたのhtmlで：

    <div class="picture"></div>

    参照：https://css-tricks.com/data-uris/

    更新：以下は、画像をテーブルに挿入するスニペットです。

    .picture {
   background:
     url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAdUlEQVQ4ja1TQQ7AIAjjER7EZ+qb5DX7Ezu4RYaaTNCkF2KlRQqgD4cEjBkYKzBeD2qrhTTc/5JjEaQV8oKM9IPcFRk6K8QiPW+SX4Rk7C5V7HmfzMJObjjxgMcCnRii9xvdi2RbZXKESXeexjkWpYhabYzzDXHli0yOvPvwAAAAAElFTkSuQmCC)
     no-repeat
     center;
   display: inline-block;
   width: 16px;
   height: 16px;
}


    <table>
  <tr>
    <td>
      <div class="picture"></div>
    </td>
    <td>Another Cell</td>
  </tr>
</table>

あなたの答え

関連記事