在 HTML 文件中以编码形式离线存储图像答案

【问题标题】：Store Images Offline in coded form in HTML file在 HTML 文件中以编码形式离线存储图像
【发布时间】：2015-06-09 05:48:35
【问题描述】：

假设我的网页包含一些图像，我不想将图像物理存储在文件夹中或作为 Html 中的链接，但我想将这些图像存储在 HTML 中，这样每当我打开该页面时（离线），图像被显示。可以使用任何技术。我也不想使用任何数据库。

【问题讨论】：

将您的图像转换为 blob 数据并使用它。

标签： javascript php html web

【解决方案1】：

<img src="/storage/sdcard0/Android/my-web/pictures/test.jpg />

我在手机中使用该代码进行离线测试，仅作为媒体从笔记本电脑传输到手机。

将“my-web”更改为您在放置它的文件夹中提供的文件夹名称
在“my-web”文件夹中，创建一个名为“pictures”的新文件夹并移动所有 img 格式。
如果不起作用，请删除“Android”并重试
如果您将文件传输到内部存储器，只需使用“sdcard0”，如果您将其移动到外部或 sdcard 更改名称是 sd 或外部名称

【讨论】：

【解决方案2】：

图像可以以 base64 格式编码并作为数据 uri 加载。这样的数据 uri 遵循以下语法：data:[<mediatype>][;base64],<data>。因此，此类嵌入图像的示例可能是：

<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABADX1BST0ZJTEUAAQEAAAxITGu...">

但是，除了像图标这样的小图像外，这很少有意义。在大多数情况下，更好的方法是使用另一种格式，一种适合离线使用的格式。 DeJaVu、ePub 或 PDF 可能。

如果页面创建仅限用于离线使用，那么您也可以使用tar 或zip 之类的文件存档。这样，您可以将包含图像的文件夹打包到一个文件中。现代桌面环境允许以透明的方式打开这样的档案。因此，当您打开它并在其中选择索引文档时，将显示包含在同一存档中并以相对方式引用的图像。但请记住，这取决于桌面环境。在苗条或不太高级的环境中，您可能必须先解压缩存档，这不是很方便。

【讨论】：