Массив Javascript цикла base64 изображений и место на странице

1

Я пытаюсь создать тестовый цикл изображений 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: HierarchyRequestError

Поэтому я не уверен, что/куда идти в этот момент, чтобы исправить эту проблему выше, и на самом деле использовать имя var xxxxxx вместо array_Icons [I].

Обновление 1

Изображение 174551

Используя этот код:

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);
}
  • 0
    Попробуйте document.body.insertAdjacentHTML("beforeend", x.outerHTML + '<br/>'); Но сначала внесите изменения в свой массив, который @Piotr Adam Milewski опубликовал в качестве ответа.
Теги:
arrays
src
createelement

4 ответа

1
Лучший ответ

Это происходит потому, что

  • вы пытаетесь сделать это x + '<br/>' т.е. добавляя к строке элемент DOM
  • array_Icons имеет массив строк, названный как переменная ie "submitBtnIcon" то время как вы должны поместить имя переменной в: [submitBtnIcon].
  • вам не нужно использовать url в <img>, просто установите src с базовым значением.

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>
Поделиться
  • 1
    Спасибо за пример @loretoparisi, но кажется, что при отображении страницы отображаются только точки ? Пожалуйста, смотрите мой OP для обновления снимка экрана.
  • 0
    Вы имеете в виду, что изображения base64 не показываются?
Показать ещё 4 комментария
0

Для параметра appendChild требуется параметр узла DOM. Вы передаете string. Чтобы узнать, что вы делаете неправильно, проверьте, что такое вывод x + '< br/>.

Поделиться
  • 0
    А что сказал Петр Адам Милевский
0

Прежде всего, ваши array_icons не указывают на переменные, они состоят всего из 4 строк: submitBtnIcon.... и т.д. Если вы хотите сохранить созданные переменные в массиве, не используйте кавычки:

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

Во-вторых, вы не можете добавить строку element + с помощью метода appendChild(), поэтому вам нужно сделать два элемента: один для изображения, второй для <br>

Поделиться
0

appendChild принимает Element не string. Прямо сейчас вы пытаетесь добавить строку "<br>" в x, которая является типом Element.

Чтобы исправить вашу проблему, вы можете явно создать элемент br и добавить его в DOM после добавления вашего изображения.

Кроме того, вам нужно удалить кавычки вокруг элементов в array_Icons, так как в настоящее время это массив строк имен переменных. Вместо этого вы хотите указать массив имен переменных, которые указывают на уже определенные строки:

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");
    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);
}
Поделиться
  • 0
    Спасибо за пример @Christian, но кажется, что при отображении страницы отображаются только точки? Пожалуйста, смотрите мой OP для обновления снимка экрана.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню