HTML 图片元素填充方法：路径、JavaScript 和 Base64 编码

图片元素填充方法：路径、JavaScript 和 Base64 编码

在 HTML 中，图片元素可以通过以下几种方式填充内容：

通过 src 属性指定图片路径

<img id='my-image' src='path/to/image.jpg'>

通过 JavaScript 设置 src 属性

var img = document.getElementById('my-image');
img.src = 'path/to/image.jpg';

通过 base64 编码设置图片

var img = document.getElementById('my-image');
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA'+ 
          'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0'+ 
          'DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

其中，第三种方式可以将图片直接嵌入到 HTML 或 JavaScript 代码中，减少 HTTP 请求次数，但会增加代码的体积。