在前端开发中，我们通常需要加载许多图片资源。对于一些小的图片，我们可以将它们作为静态文件存储在项目中，通过 URL 进行引用。但是，对于大量或动态生成的图片，这种方式可能会导致项目加载速度缓慢，因此我们需要考虑其他的解决方案。
本文将介绍一种方法：将图片以 base64 编码的形式存储在 Javascript 对象中，并在需要时通过 Javascript 动态地获取图片。这种方式不仅可以提高网页加载速度，还能减少网络请求，提高用户体验。
将图片转化为 base64 编码
首先需要将图片转换成 base64 格式。可以使用 DataURL 对象将图片读取为字符串，然后通过字符串的 split() 方法去掉前缀信息。
-------- ------------------- - --- ------ - --------------------------------- ------------ - ---------- ------------- - ----------- --- --- - ------------------------ ------------------ -- -- ---------- ------------ --- ------- - ------------------------------ ------ ------------------------------------------------- ---- - --- --- - --- -------- ------------------- --- ------ - --------------------
存储图片并获取图片
接下来我们可以将这些图片存储在 Javascript 对象中。这里我们可以使用对象的属性来存储图片，键名可以是图片名称，值则为 base64 编码字符串。
--- ---------- - - ------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- - ----------------------------------------------------------- -------- ---------------------------------------------------------------------------------------