Question

是否有（'newbie-simple'）方法在html中嵌入图像，但不像通常那样以内联形式嵌入：

<img src="data:image/png;base64,iVBORw0KGgoAAAA [...]" />

但是以base64代码放在html文件末尾的形式？

此方法的一个可能的好处是，可以使用html文件底部的相同图像数据将图像插入到多个位置的页面中。

Answer 1

如果您使用的是HTML5，那么您不必担心缓存。浏览器将加载所有图像并将其存储到图像列表中，因此图像将仅加载一次，并在找到密钥（源图像的URL）的每个位置重复使用。

如果您只使用HTML，您唯一需要做的就是将图像的URL复制到您需要使用它的每个位置。这是必要的，因为您无法在HTML中声明变量，因此无法从文档中的其他位置更改它们。为此，你需要额外的javascript例如。

然后您可以继续使用CSS来根据您的要求调整图片。 Yu可以在头文件中定义类，让img标签包含这些类，也可以在线键入样式属性，也可以导入外部CSS文件。

编辑：

javascript的一个例子是在

中添加此代码

<body>
  <img id="img" src="myIMG.jpg">

  <script type="text/javascript">
  function changeImage(id, src) {
      document.getElementById(id).src=a;
  }
  </script>
</body>

现在声明函数changeImage。您可以通过onclick或脚本标记内部调用此函数。您可以通过其ID作为第一个参数来处理正确的图像（您必须为每个图像提供其ID，不要将其与浏览器的图像列表混淆，在此处定义img-tag中的ID）和新的源URL作为第二个参数。

Answer 2

TL; DR：使用纯HTML / CSS - 遗憾的是没有。

我也需要Sciter Notes项目来保存带有嵌入图像的笔记（纯HTML文件）。

理想情况下，您应该能够做到这样的事情：

<img src="cid:1234" />
...
<data id=1234 type="image/png" base64>
  iVBORw0KGgoAAAA...
</data>

但遗憾的是还没有这样的机制。

但是你可以用脚本实现上面描述的模式。

嵌入在html中的图像，但图像数据不是内联的

2 个答案: