如何在当前页面加载外部Base64编码的图片（atob解析）

• 错误原因：你混淆了「图片URL的Base64编码」和「图片二进制数据的Base64编码」。data:image/png;base64, 前缀要求后面跟图片文件本身的二进制内容编码，而你放的是图片地址的编码，浏览器无法将地址编码解析为图片数据，因此显示失败。

• 方案1：直接使用解码后的图片URL
  先对Base64字符串解码，得到实际图片地址：https://cdn.static.net/Img/terms/terms-logo-free-sidebar-promo.svg?v=47faa659a05e，直接用普通img标签加载即可：

  <img src="https://cdn.static.net/Img/terms/terms-logo-free-sidebar-promo.svg?v=47faa659a05e" alt="法律声明图片">
  

• 方案2：通过JS动态解析加载（适合需保留Base64编码地址的场景）
  如果因限制必须保留Base64编码的URL，可通过JavaScript解码后动态设置img的src属性：

  <img id="legal-img" alt="法律声明图片">
  <script>
    const encodedUrl = 'aHR0cHM6Ly9jZG4uc3N0YXRpYy5uZXQvSW1nL3RlYW1zL3RlYW1zLWlsbG8tZnJlZS1zaWRlYmFyLXByb21vLnN2Zz92PTQ3ZmFhNjU5YTA1ZQ==';
    const actualUrl = atob(encodedUrl);
    document.getElementById('legal-img').src = actualUrl;
  </script>
  

内容的提问来源于stack exchange，提问作者Nick83