前台如何渲染后台传递过来的base64数据

当得到的base64数据是图片类型数据时

怎么判断当前的base64数据类型是图片呢

使用 JavaScript 的内置函数或相关库来解码 Base64 数据。例如，可以使用 atob() 函数来进行解码。
let base64Data = "your_base64_encoded_data";
let decodedData = atob(base64Data);
如果解码出来的数据里面包含png,jpg之类的文字代表是图片类型

接下来可以把解码后的数据使用new Blob转换成Blob数据类型,转换成Blob数据类型之后就方便处理了一点.

<script>
  let btn2 = document.querySelector(".btn2");
  btn2.addEventListener("click", function () {
    axios.get("http://127.0.0.1:3001/blob").then((res) => {
      console.log(res.data.data);
      let base64Data = res.data.data;
      let decoded = atob(base64Data);
      let imageBlob = new Blob(
        [new Uint8Array(decoded.split("").map((char) => char.charCodeAt(0)))],
        { type: "application/octet-stream" }
      );
      console.log("imageBlob", imageBlob);
      let url = URL.createObjectURL(imageBlob);
      let img = document.createElement("img");
      img.src = url;
      document.body.appendChild(img);
    });
  });
</script>