如何为HTML中的Base64嵌入图片设置别名并运行时加载

原本在HTML中直接将Base64图片数据嵌入img标签的src属性中，代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Display Image</title>
  </head>
  <body>
    <img style='display:block; width:100px;height:100px;' id='base64image'
       src='data:image/jpeg;base64, <!-- Base64 data -->' />
  </body>
</html>

但图片的Base64数据超过200K，导致代码过于冗长。希望将Base64数据单独放在某个标签中，在页面运行时动态加载到img的src属性，期望实现类似以下结构的效果：

<!DOCTYPE html>
<html>
  <head>
    <title>Display Image</title>
  </head>
  <body>
    <img style='display:block; width:100px;height:100px;' id='base64image'
       src='data:image/jpeg;base64, readdata('mybase64imageid')' />
  </body>
 <some-tag id='mybase64imageid'>my base 64 image is written 
 here</some-tag>
</html>

方法1：使用script标签存储Base64数据 #

将Base64数据放在type设为非JavaScript类型的script标签内（比如text/plain），避免浏览器将其解析为脚本，再通过JavaScript读取内容并赋值给img的src属性。

示例代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Display Image</title>
    <script>
      window.onload = function() {
        // 获取存储Base64数据的script标签内容
        const base64Data = document.getElementById('mybase64imageid').textContent.trim();
        // 拼接完整的Data URI并赋值给img
        document.getElementById('base64image').src = `data:image/jpeg;base64, ${base64Data}`;
      };
    </script>
  </head>
  <body>
    <img style='display:block; width:100px;height:100px;' id='base64image' />
  </body>
  <script type="text/plain" id="mybase64imageid">
    <!-- 直接粘贴你的Base64图片数据即可 -->
    /9j/4AAQSkZJRgABAQEAYABgAAD...（省略冗长的Base64内容）
  </script>
</html>

方法2：使用textarea标签存储Base64数据 #

如果Base64数据中包含可能干扰script标签的特殊字符，用textarea更稳妥，添加hidden属性隐藏该标签：

示例代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Display Image</title>
    <script>
      window.onload = function() {
        const base64Data = document.getElementById('mybase64imageid').value.trim();
        document.getElementById('base64image').src = `data:image/jpeg;base64, ${base64Data}`;
      };
    </script>
  </head>
  <body>
    <img style='display:block; width:100px;height:100px;' id='base64image' />
    <textarea id="mybase64imageid" hidden>
      /9j/4AAQSkZJRgABAQEAYABgAAD...（省略冗长的Base64内容）
    </textarea>
  </body>
</html>

关键说明 #

• 不要直接在img的src中写函数调用（你示例中的写法无效），必须通过JavaScript在页面加载完成后动态赋值。
• 调用trim()去除Base64内容前后的换行和空格，避免拼接Data URI时出现无效字符。
• 如果是PNG、GIF等其他格式图片，需修改data:image/jpeg;base64中的格式部分，比如改为data:image/png;base64，匹配实际图片类型。

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