在标签 javascript 中加载 base64 图像

在 Web 开发中，我们经常需要在网页中加载图片。而对于一些小图标或者较小的图片，将其转换为 base64 格式并直接在页面中加载，可以减少网络请求，提高页面加载速度。

以下是一段 JavaScript 代码，可以将 base64 图像加载到网页中：

const img = new Image();
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mPctHgPQAAGwwK/B8viwAAAABJRU5ErkJggg==';
document.body.appendChild(img);

在这段代码中，data:image/png;base64, 表示这是一个 base64 编码的 PNG 图像，后面跟着编码后的图像数据。这些数据编码了像素的 RGB（红绿蓝）值和透明度，可以通过 JavaScript 中的 Image 对象加载到页面中。

我们可以将这段 JavaScript 代码封装为一个函数：

function loadBase64Image(base64) {
  const img = new Image();
  img.src = base64;
  document.body.appendChild(img);
}

然后调用这个函数，就可以将 base64 图像加载到页面中了：

const base64Img = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mPctHgPQAAGwwK/B8viwAAAABJRU5ErkJggg==';
loadBase64Image(base64Img);

这样，在标签 javascript 中加载 base64 图像就可以轻松实现了。

结束语

通过以上介绍，我们了解了如何在标签 javascript 中加载 base64 图像，并且了解了如何封装一个函数方便地调用。在实际项目中，我们可以将这些技巧应用于图片等资源的加载优化中，提高网页的性能和用户体验。