将图像以编码形式存储在HTML文件中

Question

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

Answer 1

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

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

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

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

Answer 2

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

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

1. 将“my-web”更改为您放置文件夹中的文件夹名称
2. 在“my-web”文件夹中，创建一个名为“pictures”的新文件夹并移动所有img格式。
3. 删除“Android”如果不起作用并再次尝试
4. 如果您将文件传输到内部存储器，只需使用“sdcard0”，如果您在外部或SD卡中移动它，更改名称为sd或外部名称