Как добавить описание к картинке?

Question

Как добавить описание к картинке в массив через js ? что бы при загрузке высвечивалась сразу с картинкой.

let pictures=[ 'https://images.unsplash.com/photo-1595172150339-2096662f8bbf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80', 
'https://images.unsplash.com/photo-1595172150339-2096662f8bbf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80', 
'https://images.unsplash.com/photo-1595172150339-2096662f8bbf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80',
'https://images.unsplash.com/photo-1595172150339-2096662f8bbf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80'
];

const elements = document.querySelectorAll('.pic')
elements.forEach((el, i) => {
  let img = document.createElement('img');
  img.src = pictures[i]
  el.append(img)
})

.container{
  width:650px;
  display:flex;
  height:600px;
  flex-direction:column;
  flex-wrap:wrap;
 justify-content: space-between;
  
}
.block{
  width:300px;
    height:250px;
  border:1px red solid;
 
}
.pic{
  width:300px;
    height:200px;
 border:1px red solid;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

img {
  width: 100%;
  height: auto;
}

<div class="container">
  
  <div class="block">
    <div class="pic">
      <div class="text"></div>
  </div>
     </div>
  <div class="block">
    <div class="pic">
      <div class="text"></div>
  </div>
     </div>
     <div class="block">
    <div class="pic">
      <div class="text"></div>
  </div>
        </div>
        <div class="block">
    <div class="pic">
      <div class="text"></div>
  </div>
    </div>

https://codepen.io/camobap6/pen/QWyzdPx

Answer 1

Не уверен правильно ли понял суть вопроса, но могу предложить сделать так:

let pictures=[ 
['https://images.unsplash.com/photo-1595172150339-2096662f8bbf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80', 'Описание картинки'], 
['https://images.unsplash.com/photo-1595172150339-2096662f8bbf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80', 'Описание картинки'], 
['https://images.unsplash.com/photo-1595172150339-2096662f8bbf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80', 'Описание картинки'],
['https://images.unsplash.com/photo-1595172150339-2096662f8bbf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80', 'Описание картинки']
];

const elements = document.querySelectorAll('.pic')
elements.forEach((el, i) => {
  let img = document.createElement('img');
  img.src = pictures[i][0];
  img.setAttribute('alt', pictures[i][1]);
  el.append(img)
})

БЛОГ НА HUSL

Как добавить описание к картинке?

Ответы (1 шт):