在前端开发中，我们通常需要加载许多图片资源。对于一些小的图片，我们可以将它们作为静态文件存储在项目中，通过 URL 进行引用。但是，对于大量或动态生成的图片，这种方式可能会导致项目加载速度缓慢，因此我们需要考虑其他的解决方案。
本文将介绍一种方法：将图片以 base64 编码的形式存储在 Javascript 对象中，并在需要时通过 Javascript 动态地获取图片。这种方式不仅可以提高网页加载速度，还能减少网络请求，提高用户体验。
将图片转化为 base64 编码
首先需要将图片转换成 base64 格式。可以使用 DataURL 对象将图片读取为字符串，然后通过字符串的 split() 方法去掉前缀信息。
-- -------------------- ---- ------- -------- ------------------- - --- ------ - --------------------------------- ------------ - ---------- ------------- - ----------- --- --- - ------------------------ ------------------ -- -- ---------- ------------ --- ------- - ------------------------------ ------ ------------------------------------------------- ---- - --- --- - --- -------- ------------------- --- ------ - --------------------
存储图片并获取图片
接下来我们可以将这些图片存储在 Javascript 对象中。这里我们可以使用对象的属性来存储图片，键名可以是图片名称，值则为 base64 编码字符串。
var imageStore = {
"test": "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAA4VBMVEUAAAD/////v7+/39/f//Pz8////f393d3d3v7+/09PT////n5+fX19e/v7+fn5+bm5taWlpb29vaGhoqKiv///09PTt7e3k5OTi4uLi3t7f39/d3d2dnZ1tbWzs7Ovr6+npaWhpaWfnp6YmJiXl5eWkpKTk5OSfn56SkpKZmZmWlpaSUlJREREQcHBxPT0/hoaGiIiIVFRUVFRUUFBRMTExDQ0NDIyMjAwMDBAQEBAQEBGRkZERERFxcWAgID/AAD///8A/wD/AP//AAD///8A/wD/AP//AAD+QQB+/pMAAAAJcEhZcwAACxMAAAsTAQCanBgAAADcSURBVBjTY5g5dOf0Xz1Nq3bxVLh36tJnTR/W+GMlgbHq3tC2vUPKnJfR9+psKjIeBZnJh8WUIVCdfTmmwJoV+JzgG1sWbH4X9+GrquFkPvzy8iFODQ1S2IfwxFH0m6OTsOgFlDXpaY4fvP7l+yLx/8N0oD51de3VRtqMgAAAABJRU5ErkJggg==",
"test2": "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAA4VBMVEUAAAD/////v7+/39/f//Pz8////f393d3d3v7+/09PT////n5+fX19e/v7+fn5+bm5taWlpb29vaG
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/31089) ，转载请注明来源
[https://www.javascriptcn.com/post/31089](https://www.javascriptcn.com/post/31089)