Блог

Я пытаюсь установить атрибут src для нескольких изображений с помощью цикла. У меня есть 8 изображений, и я хотел бы вставить эти 8 изображений в свой html. Я использую цикл for of для массива, который поступает из файлов JSON. Мой JSON, кажется, в порядке, потому что я могу утешать.регистрируйте правильные значения источника атрибута. Значения выглядят следующим образом: «images/img1.png». img1 становится img2… Проблема в том, что он помещает images/img8.png для всех изображений в консоль и только одно изображение в html.

Я попытался поместить querySelectorAll(‘.image’), но он говорит TypeError: img.setAttribute is not a function .

Я попытался вставить еще один цикл в цикл for of, но это создает бесконечный цикл, по-прежнему с изображениями/img8.png.

Вот мой код :

   .then(response => response.json())
    .then(data => {
      let img = document.querySelectorAll('.image') 
      for (const item of data) {
        img.setAttribute('src', item.source)
        console.log(img)
      }
    }).catch(err => console.error("Une erreur est survenue", err))
 

Вот мой массив

 [
  {
    "image_name": "Image1",
    "image_id": "1",
    "source": "images/img1.png"
  },
  {
    "image_name": "Image2",
    "image_id": "2",
    "source": "images/img2.png"
  },
  {
    "image_name": "Image3",
    "image_id": "3",
    "source": "images/img3.png"
  },
  {
    "image_name": "Image4",
    "image_id": "4",
    "source": "images/img4.png"
  },
  {
    "image_name": "Image5",
    "image_id": "5",
    "source": "images/img5.png"
  },
  {
    "image_name": "Image6",
    "image_id": "6",
    "source": "images/img6.png"
  },
  {
    "image_name": "Image7",
    "image_id": "7",
    "source": "images/img7.png"
  },
  {
    "image_name": "Image8",
    "image_id": "8",
    "source": "images/img8.png"
  }
]
 

У вас есть идея, где ошибка?
Спасибо.

Попробуйте это

 const images = document.querySelectorAll('.image'); // a collection 

....
.then(response => response.json())
.then(data => data.forEach(({source,image_name},i) => {
    images[i].src = source;
    images[i].alt = image_name;
  })
).catch(err => console.error("Une erreur est survenue", err))
 

https://jsfiddle.net/mplungjan/sehx2bc4/

если у изображений есть идентификаторы, соответствующие image_id, вы можете использовать их вместо collection и [i]

 .then(response => response.json())
.then(data => data.forEach(({source,image_name, image_id}) => {
    const image = document.getElementById(image_id);
    image.src = source;
    image.alt = image_name;
  })
).catch(err => console.error("Une erreur est survenue", err))
 

querySelectorAll возвращает список, подобный массиву. Предположительно, вам нужно повторить этот список вместе с вашим списком изображений

 .then(response => response.json())
.then(data => {
  let img = document.querySelectorAll('.image') 
  for (var i =0;i<data.length;i  ) {
    img[i].setAttribute('src', item[i].source)
  }
}).catch(err => console.error("Une erreur est survenue", err))