base64 图像的 Javascript 数组循环并放置在页面上

Question

我正在尝试创建一个 base64 图像的测试循环，以便我可以快速查看 Base64 中的图标在我的 html 页面上的样子。

以下JS代码是我目前正在使用的代码:

var submitBtnIcon    = "data:image/png;base64,iVBORw0KGANSUhEUgAAA...+d6uAAAAAElFTkSuQmCC";
var addBtnIcon       = "data:image/png;base64,iVBORw0KGg...oAAAANSUhEU=";
var clearBtnIcon     = "data:image/png;base64,iVBw0KGgoAAAA...MAAADXqc3KAA3NCSVQICAjb4U==";
var exportBtnIcon    = "data:image/png;base64,iVBORw0KGgoAAAA...+48GgAAAABJRU5ErkJggg==";

var array_Icons = [
    "submitBtnIcon", "addBtnIcon", "clearBtnIcon", "exportBtnIcon"
];

for (i = 0; i < array_Icons.length; i++) {
    var x = document.createElement("IMG");

    x.setAttribute("src", "url('" + array_Icons[i] + "')");
    x.setAttribute("style", "width: 15px; height: 15px; margin-right: 5px;");

    document.body.appendChild(x + '<br/>');
} 

显然这并没有按预期工作。它所做的只是在行 document.body.appendChild(x + '< br/>'); 上抛出一个错误，说:

0x800a139e - JavaScript runtime error: HierarchyRequestError

所以我不确定此时要做什么/去哪里才能解决上面的这个问题并让它实际使用 var xxxxxx 名称代替 array_Icons[I ].

更新 1

使用这段代码:

var array_Icons = [
    submitBtnIcon, addBtnIcon, clearBtnIcon, exportBtnIcon
];

for (i = 0; i < array_Icons.length; i++) {
    var x = document.createElement("IMG");
    var br = document.createElement("br");

    x.setAttribute("src", "url('" + array_Icons[i] + "')");
    x.setAttribute("style", "width: 15px; height: 15px; margin-right: 5px;");

    document.body.appendChild(x);
    document.body.appendChild(br);
}

Answer 1

这是因为

• 你正在尝试这样做x + '<br/>'即向字符串附加一个 DOM 元素
• array_Icons 有一个名为变量的字符串数组，即 "submitBtnIcon"而您必须将变量名称放入:[submitBtnIcon] .
• 你不需要使用url在<img>标签，只需设置 src使用 base64 值。

var submitBtnIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAD6UlEQVRIS6WU22tcVRTGv7XO3GeaTNOmBW2rIvoghZIH8fJS4pMI2kwKYyWKRaIPCvk/BF99sQglFiGDVSsGxFvAgE8JAUEL0tKYi9RMMk1yJnPOzJm9lqyTSXpJHMXsl8M5e5/1W9+31tqELkunkIjciffQc/oVaHCG0e4ThShSf4rTn8n/5XLmxdo33WLQP23qj73lVuaZCbSr8LbmQAyAAXVQFZBSGq7nOVDb/y0tv5+lQX91v1j7AvTb3GiYe/4S1r6H50EoAabOSTUFClYHUQfWRBGae7KZxfUT+0H2APQHPBxgYEnX59RLQMkDEUO1c5IUpApVB1KJn9BEDyPZdz3/0vxTD6rYA3BfZz4OtfCWRquWPYjMczCbRQrA3k2BKRGwCqBtiOYf50L75jk6h6/uhewBtCaP1ML62mFObHtuACbwjgIAQg8CzC5KcTaV/jI55Je6AoLPUxq1WmaNWmGJrKBQtuxtEUgEGluFjkUAOQfKpTM30ufDJ7oCGhVoZAHIYgPqQdgyNou2V6wgblcFxxSBOAFnPfyavYDT3QET+KvlcMyimy0MiDJ4VwEgQnHgGCBWZEDgwNk0rmRfxRvdazCBj/wm3ibLfBtCbF3TUUBxmaGiILLvptLscqC+QzhL5/FTV4Bew/HaHdwmr6PAMr1HgVi2HQWyY5HCCjLVdxEv/Gub2oH2Zxi64+OLWAHHBVbzarfMpsBqpLES21k6msOjVIb7TwA7pFfx7KqP70hQiO2520ViDUwCiRUAc0cP4en9gm83XbfLroJUtU5Nikdtp4cQA4S2W/XYaPcYXQEWcv1ystWMouSOgLhNDSfQpIdG3ygK/+s23fmpdgkatq0Ud02y28EgGQ+bh99B74EAq1ce+bC19se7NlBmBgHCAIfJLJB/6MKpN29OHAiwsVF7bf5241PdWoYLagibkWy5PG+2UkhEa6eGhoYWDwSo14PXb9268UnbiURthzAIKAwDDYMGO+ceK5VK8wcC+L4/vLi4eFVEEEURwjCUKIrY9300m83jw8PDKwcC2M+Tk5Pl5eXliWw2i42NDZ2dnaWBgYGTY2NjS92C7zsHlUrF6+/vT1ar1XQul+P19fX85ubm1vT09NTMzMyZhYUFDA4OflAqld7P5/OZYrG41Wg0pL+/v1mtVqNyuXzfNO/Owfj4+EVmfhnASRHpY2brb09EcsxMqVSqubKyUshkMu1isdgKgiBFRDZ0DRFxRFQnopqILHqed21kZGT8PgWVSqUQRdERESk653o9z8sRUUFV1Z4A8mS3T3x7Kjnntpi53nkPPM+ri8gGM68nk8m1crkc7/0NhPIRN5eg+/QAAAAASUVORK5CYII=";

var addBtnIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACUElEQVQ4T6WTTWgTURDH/+/tbnaz2bRJg4VQDdhiLI0f1NKKpdCreBCpIIgIQqEHbQ/1pAchF6UKxYPgQa+e4sVWMKgFEclBRHrwo4eKERGCH/1INt1NsrtvJNlUW4tQ6IN3mpnfzPxnhmGHj+0wHtsGZNKpgGlF1IqukGY5bPRWzqwn/wPITO7ukEgSGyuyrDUMDnUrnUePPQSCAyDyzYwBzFxgyds9DYD7IPW66IYHaN2hSRG1CvRUPwT3ICrFDfkIRiQG+cj9Ogr4OtVmF82KtjG7cF20dO1D7PAA3NJ3gEmb5AppHOrQjA/4PN1eVvYcDFGzI0ECerQdeiyM2q9FyCEZngOQ22QwQjgqQ+l76gPo3TlaXVr+68EYRM2C8FxIioy3N0x0nWhFtN+FVwUkFsD81AqcEh9uAOwXfWRam/QDA4Mc5Hhzp4T8TAGGomLoZjdaez3kRn9gqbAEMjS/5rW5A1sADbE54NoesmM/EfAAlSkw4mGsFpZRqRF4CGd9wLNOMu3miP7ZLCYDwiU8Hy/BM+tzJzg1YPhaCMmr33wNStk4mfbmFtY5nBOUQBBPJgXKhRLAJYgqcHI6jsTFDz6g/DhAZoVv2eqGlRnIjAdgrRTBhYAeJtiWBMfjSPb2nGeZ2dm9kbVX1yN4f0qQJAOo/3o/XNYkzN9dQH4uDwkODl0+jsSgXs1eeKmSUwaXFbB0Oq0lEvt3GUZrWAmqBheeIjg0wZgmQ4LrWfh05vSVtpGRRx1jl3LkOK65+JF9mZi4Ry0tk9s+pv9d7W97deRNAWjIZwAAAABJRU5ErkJggg==";

var clearBtnIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACz0lEQVQ4T6WTX0hTcRTHz+/+7rybd3fTNXUhNv9npVE9mIGRlnvIh/6AZkQovRglLREzyYcm1YNSGRJEiA8ZA9GHNNAigkSlCJEK08QUNsvU1Jm7NnfZb/fEhCQTe+n3eH7n+zlfDt9D4D8f2UyPk7uPgcyKIEy9T1JG32zWtwHQ3Wgy5Ns9XnzBvw0EWKbGKADJVjYdtO6jzbErrHD/NyUA4oTinw+n6N+qi6AnyOFgZ8iBIyeHd/T0sD/drANg97byuenJBo4HoBwAFQC05tgepjVfHa2A3PAVkpX24f3JxuRkwT4+roRA6wBLjySXIstWbaiqBZj5HAUTXdGQc3MM+h0Js7Z3Y5aQ6KXVWibFxDhkn+/IGmCk3rjPjEuDr2LLoTvqBuTRFhBKqsGzwIE+IgZYwAMJGemV84w9Eb3euwsu1/EfHLd3DdDU9bjeNnr+SotYAwOGQuBEA5TUJcDcBA8BPwFCOEDGIDIy8mJwZYVpEatOLSykrAJyHG16GmuVCS+CyCmwHBTg+uJpSMePENADNNklEAQCYYCLl2XZtGGJZ9qHrrncrls8zwOlGqCUgj4iesRGunbGdtweGmz3ZlCBgCAIQXNqasrw7Kz/nts9vbbEQ43PZ5e9XrMgGYcJC2RQjeDstdvO5rW5aqTh3qb02uIkQ3h4hR+xQKPTgUmne1Y6NZW/CsisbDiwpDW9NujFooHqgrY91Q/iJWtaVt+F3Na/01cKoEkTRTtjrKNKUSZWAclHLwma7Nza1Ljo3s7i7O7ttc7cuEjDw6TEpOav7qmnXWW2T/86lw0RTXO03pF/LldwHIUvdec2jfBvKGlubpYsli3xQUU1IaLR5/MFvyuQ7AmqOzIiNP1hOj0falZVlXAc50XEACFkiVLqYYy5iNPpTETEg4QQCyJKACBxACohKKnAaUJiRFRDIkQMOZIJITIizhBC+n4Bqj0YeIFAVHoAAAAASUVORK5CYII=";

var exportBtnIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB60lEQVQ4T43Sz2vTYBgH8O+TpkzMsrQq7lhF1AkNIYIljIk/L64H0c1RmXjZQS+KP0DQf8CLKIhQqMKoF0WG9OBB9KAoHiZd2SHSg22hlEKdUkswNanN+8oGHTYIyXt+3g/P+/2+hBCn0WhMu657izEWJyIuiuKKZVlXNU2zKeh+u91Ot1qtVwB+yLL8zvO8UcuyTimKspZIJMYDgXq9/rHT6UxpmrY5W6lUbtq2fa/ZbJ4IBMrl8hfP84RkMnlgsG02m00ZhrFcrVZnA4FisWgyxqKpVGr/AMjlcpOqqn6q1WpzgcD7D8smY1w8ftSYGAD5fH67qqqPTNO8swH030bStivFwT0+GPIACCT2vtKl+wCJe3jueqT7840yh/a/wdPSbUzMTI+XPacLwL8QB3EHAAenUURi/SU69OvcEJC/AX3+GErun6BCga1jKNBJnBkCnlyBfuEISm4/GBiTUaC0H7gMPXM4HBCXUBBmfUB2AXpmEiUnxBN2yChE533Aw4vQzxvhN5AWfMCDsziYmcJKmBBjI3gZu4aZoRBfPH28e++3u6sEJq1X/58uN+YF9NCUT7+2d6afRyNel4jWHMdZpcXFZ7soumUfJ2EbJ64QSOIMIyTwzU+1DnBGJKL3m7jTJ6IOEX0H8Pkv/NK/JJJbTNcAAAAASUVORK5CYII=";

var array_Icons = [
  submitBtnIcon, addBtnIcon, clearBtnIcon, exportBtnIcon
];

for (i = 0; i < array_Icons.length; i++) {
  var x = document.createElement("IMG");
  var br = document.createElement("br");
  x.setAttribute("src", array_Icons[i] );
  x.setAttribute("style", "width: 15px; height: 15px; margin-right: 5px;");

  document.body.appendChild(x);
  document.body.appendChild(br);
}

console.log(document.body.innerHTML)

事实上你可以检查生成的 html(即 document.body.innerHTML ):

<img src="url('submitBtnIcon')" style="width: 15px; height: 15px; margin-right: 5px;"><br><img src="url('addBtnIcon')" style="width: 15px; height: 15px; margin-right: 5px;"><br><img src="url('clearBtnIcon')" style="width: 15px; height: 15px; margin-right: 5px;"><br><img src="url('exportBtnIcon')" style="width: 15px; height: 15px; margin-right: 5px;"><br>