bugfix> html > 投稿

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

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

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

回答 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>
    
    

あなたの答え