Установить атрибут sr c коллекции html (img) из массива путей в качестве значений для установки на каждом img с использованием ES6 pure Javascript?

Question

У меня есть массив значений sr c, таких как [path1, path2, path3], и коллекция html той же длины массива, что и значение arr. Поэтому я хочу передать каждое значение, чтобы установить sr c из элементов html. Как я могу сделать? Я пробовал forEach для Of, map, но по-прежнему либо все элементы на одном пути, либо только один (первый элемент) установлен.

//My code now
<img alt='first-in-collection'>
<img alt='second-in-collection'>
<img alt='third-in-collection'> 

//The variable
let arr = ['path1', 'path2', 'path3']

//Expected result 
<img src='path1' alt='first-in-collection'>
<img src='path2' alt='second-in-collection'>
<img src='path3' alt='third-in-collection'>

My Running Code Ссылка

Answer 1

Вам не нужно запускать циклы как для массивов изображений, так и для массивов путей. Запустите l oop на любом одном массиве. Продолжайте увеличивать счетчик итератора и установите sr c текущего индексированного изображения итератором.

let arr = ['path1', 'path2', 'path3'];\
// get all images
let img = document.getElementsByClassName('img-thumbnail')
// initialize iterator with 0    
let i=0;     
for(let el of arr){
       // set attribute of corresponding image
        img[i++].setAttribute('src', el)
        
    }

<div class="col-8">
    <div class="row produit-desc-lense">
        <div class="col-4 text-center border-bottom">
            <img class="img-fluid rounded img-thumbnail" alt="/">
            <h5>caméra 2</h5>
        </div>
        <div class="col-4 d-flex align-items-center justify-content-center border-bottom">
            <p></p>
        </div>
        <div class="col-4 d-flex align-items-center justify-content-center border-bottom">
            <select id="selectNumber">
                <option>Choose a number</option>
            </select>
        </div>
    </div><div class="row produit-desc-lense">
        <div class="col-4 text-center border-bottom">
            <img class="img-fluid rounded img-thumbnail" alt="/">
            <h5>caméra 2</h5>
        </div>
        <div class="col-4 d-flex align-items-center justify-content-center border-bottom">
            <p></p>
        </div>
        <div class="col-4 d-flex align-items-center justify-content-center border-bottom">
            <select id="selectNumber">
                <option>Choose a number</option>
            </select>
        </div>
    </div><div class="row produit-desc-lense">
        <div class="col-4 text-center border-bottom">
            <img class="img-fluid rounded img-thumbnail" alt="/">
            <h5>caméra 2</h5>
        </div>
        <div class="col-4 d-flex align-items-center justify-content-center border-bottom">
            <p></p>
        </div>
        <div class="col-4 d-flex align-items-center justify-content-center border-bottom">
            <select id="selectNumber">
                <option>Choose a number</option>
            </select>
        </div>
    </div>
    
</div>