是否可以将 html 代码和所有图像放在一个文件中？

发布于 2024-09-16 10:24:21 字数 332 浏览 10 评论 0原文

我想要一个带有 javascript 的 html 文件。然后我想在这个文件中包含一些图像。我想将此 html 文件发送给我的朋友（通过电子邮件）。我希望他们看到我的带有图像的 html 文件，但我不想向他们发送带有所有图像的所有文件。如果只向他们发送一份文件就好了。

我也不想在网络服务器上放置图像。

我也不想向他们发送包含所有文件的存档（因为他们需要打开该存档）。

我想要的太多还是可以做我想做的事？

添加

我不希望我的朋友在邮件客户端中看到该 html 文件。我想以附件形式发送一个文件。因此，他们可以保存它，然后用浏览器打开。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

似最初 2024-09-23 10:24:21

是的，这是可能的：

# HTML
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA................." />

# CSS
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA.................)

文件源使用 Base64 算法进行编码，可以轻松地正常表示二进制数据文本。

在维基百科上了解更多信息：数据 URI 方案。

Yes, it is possible:

# HTML
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA................." />

# CSS
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA.................)

File source is encoded using Base64 algorithm that allows easily represent binary data as normal text.

Find out more on wikipedia: Data URI scheme.

回复收藏 0 原文

任性一次 2024-09-23 10:24:21

根据邮件客户端是否支持，理论上您可以使用数据 URI 方案，例如所以：

<img src="data:image/png;base64,
    iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
    C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
    AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
    REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
    ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
    vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />

同样，支持取决于邮件客户端。有些人可能根本不支持。有些可能会在 X 个字节后截断。等等。据我所知，这样的人并不多。此外，我没有看到像这样在 HTML 中内嵌图像的其他方法。在广泛支持之前，最好的选择是将图像作为附件发送。

更新按照OP的更新：好吧，大多数现代网络浏览器都支持它。前面提到的维基百科链接甚至详细提到了它们。

以下 Web 浏览器目前支持数据 URI：
基于 Gecko，例如 Firefox、XeroBank、Camino、Fennec 和 K-Meleon
Konqueror，通过 KDE 的 KIO 从属输入/输出系统
Opera（包括 Nintendo DSi 或 Wii 等设备）
基于WebKit，例如Safari（包括iPhone）、Android的浏览器、Epiphany和Midori（WebKit是Konqueror的KHTML引擎的衍生版本，但Mac OS X不共享KIO架构，因此实现不同），以及基于 Webkit/Chromium 的，例如 Chrome 和 Iron
Internet Explorer 8：出于安全原因，Microsoft 限制了对某些“不可导航”内容的支持，其中包括担心数据 URI 中嵌入的 JavaScript 可能无法被脚本过滤器解释，例如由基于网络的电子邮件客户端使用。 数据 URI 必须小于 32 KiB。

请注意，IE8 会在 32KB 之后截断字符串。因此，只要图像不是那么大，您就可以为 IE8 用户使用数据 URI 方案。 IE7 及更低版本不支持。

Depending on whether the mail client supports it, you could in theory use the data URI scheme, like so:

<img src="data:image/png;base64,
    iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
    C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
    AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
    REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
    ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
    vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />

Again, the support is mail client dependent. Some might not support it at all. Some might truncate after a X amount of bytes. Etcetera. As far as I know there aren't many of them. Further I don't see another ways to inline images in HTML like that. Until the support is widespread, your best bet is really to send the images along as an attachment.

Update as per the OP's update: well, most of the modern webbrowsers supports it. The aforementioned Wikipedia link even mentions them in detail.

Data URIs are currently supported by the following web browsers:
Gecko-based, such as Firefox, XeroBank, Camino, Fennec and K-Meleon
Konqueror, via KDE's KIO slaves input/output system
Opera (including devices such as the Nintendo DSi or Wii)
WebKit-based, such as Safari (including on iPhones), Android's browser, Epiphany and Midori (WebKit is a derivative of Konqueror's KHTML engine, but Mac OS X does not share the KIO architecture so the implementations are different), as well as Webkit/Chromium-based, such as Chrome and Iron
Internet Explorer 8: Microsoft has limited its support to certain "non-navigable" content for security reasons, including concerns that JavaScript embedded in a data URI may not be interpretable by script filters such as those used by web-based email clients. Data URIs must be smaller than 32 KiB.

Note that IE8 truncates the string after 32KB. So, as long as the images aren't that large, you could use the data URI scheme for IE8 users. It's not supported on IE7 and lower.

回复收藏 0 原文