Могу ли я публиковать изображения в массиве JavaScript

Хорошо, так что вы можете полностью сделать что-то подобное на JavaScript, просто не так, как вы пробовали в своем вопросе.

То, что я предполагаю, что вы пытаетесь сделать, - это отобразить кучу изображений на странице из значений в массиве. Вот один из способов сделать это:

Основной путь

function showImages() {
  var urls = ["http://placebear.com/99/99", "http://placebear.com/100/100", "http://placebear.com/101/101"];
  for (var i=0;i<urls.length;i++) {
    document.getElementById("images").innerHTML += "<img src=\""+urls[i]+"\"><br>"
  }
}

<div id="images"></div>

<button onclick="showImages()">Show Images</button>

Это создает массив, полный URL - адреса для изображений, а затем перебирает этот массив и каждый элемент добавляет HTML - код для этого изображения в images DIV, то есть он будет отображаться на странице. Я завернул это в функцию, чтобы ее можно было вызвать, когда нажата кнопка.

• function showImages() создает новую функцию, которая является оболочкой для нашего кода. Всякий раз, когда это выполняется, весь код внутри него будет запущен;
• На следующей строке мы создаем массив и помещаем его в переменную с именем urls. Этот массив содержит URL-адреса для трех изображений (мои используют заполнители, но вы заменяете их путями к реальным изображениям на вашем сайте);
• for (var i=0;i<urls.length;i++) начинает цикл. urls.length получает количество элементов в urls массиве, поэтому этот код становится for (var i=0;i<3;i++) после того, как интерпретации JS. Таким образом, i определяется как переменная и устанавливается в 0. Выполняется код внутри цикла, а затем код проверяет, является ли i менее 3. Если это так, то добавляет 1 к i (известный как инкремент - i++), а затем снова запускает код. Таким образом, это проходит через каждый элемент в нашем массиве.
• Затем, наконец, мы получим div, который мы объявили в HTML, найдя его на основе его уникального атрибута id (document.getElementById("images")) и добавим HTML для изображения к свойству innerHTML, которое просто содержит все HTML, который находится внутри div.

Более жесткий путь:

Конечно, если вы хотите сделать это "правильным" способом, вы бы использовали объект JavaScript Image:

function showImages() {
    var urls = ["http://placebear.com/99/99", "http://placebear.com/100/100", "http://placebear.com/101/101"];
    var imgs = [];
    for (var i=0;i<urls.length;i++) {
      imgs.push(new Image());
      imgs[i].src = urls[i];
      imgs[i].onload = function() {
        document.getElementById("images").appendChild(this);
      }
    }
}

<div id="images"></div>

<button onclick="showImages()">Show Images</button>

Этот код немного сложнее. Работа с JavaScript на странице основана на концепции DOM или Document Object Model. Идея здесь заключается в том, что вы создаете каждый узел изображения (тег изображения) отдельно (без отображения его на странице), а затем, когда он загружается, добавьте его в DOM. Я не буду объяснять это здесь, но вы можете посмотреть, как это работает, если вы хотите.

Заметки

Вы можете найти более подробную информацию обо всех этих языковых элементах в Интернете:

Основной путь:

• Loops
• функции
• Массивы
• document.getElementById()
• innerHTML

Более жесткий путь

• DOM
• new Image()

Изображения заполнителя:

• http://placebear.com

Во-первых, вам нужно сгруппировать элементы, которые соответствуют вашему массиву изображений. Я пошел с document.querySelectorAll('.image') чтобы захватить все изображения, у которых есть image класса.

Затем вам нужно .src все изображения в вашем массиве и присвоить атрибут .src каждого из соответствующих изображений индексу массива:

var images = ["http://placehold.it/100", "http://placehold.it/100", "http://placehold.it/100"];
var image_targets = document.querySelectorAll('.image');

for (var i = 0; i < images.length; i++) {
  image_targets[i].src= images[i];
}

<img class="image">
<img class="image">
<img class="image">

Надеюсь это поможет! :)

Вы можете использовать классы:

function setBgClass(arg1) {
  var el = document.getElementById("bg-container");
  var clName = 'background-' + arg1;
  el.className = '';
  el.classList.add(clName);
}

#bg-container {
  width: 200px;
  height: 200px;
}

.background-1 {
  background: url("https://avatars0.githubusercontent.com/u/82592?v=4&s=200");
}

.background-2 {
  background: url("https://pbs.twimg.com/profile_images/794277147846340608/TMfI-Dro.jpg");
}

<div id="bg-container"></div>
<button onclick="setBgClass(1)">Background 1</button>
<button onclick="setBgClass(2)">Background 2</button>

или вы можете отредактировать исходный атрибут тега изображения:

function setBg(arg1) {
  var el = document.getElementById("bg");
  el.setAttribute('src', arg1);
}

<img id="bg" src=""/>
<button onclick="setBg('https://pbs.twimg.com/profile_images/794277147846340608/TMfI-Dro.jpg')">Background 1</button>
<button onclick="setBg('https://avatars0.githubusercontent.com/u/82592?v=4&s=200')">Background 2</button>

Измените для решения, отличного от jQuery, для захвата элементов с классом images:

вы можете использовать document.querySelector('.images') и получить элементы, которые имеют images класса в виде array или если вы хотите поддерживать старые браузеры, используйте document.getElementsByClassName('images')