在html页面中仅定义一次base64字符串

问题描述 投票:0回答:1

我在 html 页面中有一个 base64 图像 - 与一个链接相结合,可以在新选项卡/窗口中打开相同的图像。

但目前我必须在 href 和 img 标签本身中写入两次大的 base64 字符串。

有没有办法在我的代码中只编写一次 base64 字符串,并在 href 属性和 img 标签中使用它?

<a href="data:image/png;base64,iVBORw0KG..." target="_blank">
    <img src="data:image/png;base64,iVBORw0KG...">
</a>
html css image base64
1个回答
0
投票

实现此目的的一种方法是将图像作为 base64 编码图像嵌入到

svg
标签中,然后使用 use 在其他图像中引用它。您必须使用
svg
标签而不是
img
标签,但这有点烦人。

见下文

<svg style="display: none" version="2.0">
  <defs>
    <symbol id="myimage" viewbox="0 0 100 100">
      <image
        width="100" height="100"
        xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII="
        />
    </symbol>
  </defs>
  <use href="#myimage"/>
</svg>

<svg width="20" height="20" version="2.0">
    <use href="#myimage" />
</svg>
<svg width="50" height="50" version="2.0">
    <use href="#myimage" />
</svg>
<svg width="75" height="75" version="2.0">
    <use href="#myimage" />
</svg>

© www.soinside.com 2019 - 2024. All rights reserved.