反应显示 base64 图像 - Javascript (1)

📌 相关文章

📜 反应显示 base64 图像 - Javascript (1)

📅 最后修改于: 2023-12-03 15:37:06.641000 🧑 作者: Mango

反应显示 Base64 图像 - JavaScript

在前端开发中，经常会将图片转化成 Base64 编码的字符串来实现一些特殊的需求，例如在页面中直接显示图片，或者将图片转化作为数据上传服务器等等。在这种情况下，我们需要一种方式去反应地将 Base64 编码的图片显示在页面上。本文将介绍如何使用 JavaScript 实现这个需求。

HTML 页面

首先，我们需要在 HTML 页面上添加一个 <img> 标签，它的 src 属性将会用作显示图片的数据 URL。代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Base64 Image Example</title>
</head>
<body>
  <img id="img" src="">
</body>
</html>

JavaScript

在 JavaScript 中，我们需要获取到转化后的 Base64 编码字符串，然后将它赋值给 <img> 标签的 src 属性。下面是一个简单的 JavaScript 实现，将 Base64 编码字符串作为参数传入 setImage() 函数中，然后将它赋值给 <img> 标签的 src 属性。

function setImage(base64String) {
  var img = document.getElementById("img");
  img.setAttribute("src", "data:image/png;base64," + base64String);
}

注意到其中的 "data:image/png;base64," 是必须的，这是指数据 URL 的前缀，它告诉浏览器如何处理这个字符串。在实际使用中，我们需要根据要显示的图片类型，修改这个前缀值，例如 data:image/jpeg;base64, 表示 jpg 图片。

完整代码

最后，我们将两部分代码整合在一起，完整的代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Base64 Image Example</title>
  <script>
    function setImage(base64String) {
      var img = document.getElementById("img");
      img.setAttribute("src", "data:image/png;base64," + base64String);
    }
  </script>
</head>
<body>
  <img id="img" src="">
</body>
</html>

结论

本文介绍了如何使用 JavaScript 反应地显示 Base64 编码的图片。这个方法相对简单，只需要将 Base64 编码字符串赋值给 <img> 标签的 src 属性即可。在实际开发中，应根据需要调整数据 URL 的前缀值。