CSS background-image 访问多个图像

Question

我正在 forEach 循环中创建一个 div 来保存图像（每个图像都有自己的 div）。图像保存在单独的文件夹“媒体”中。通过以我在下面代码中的方式设置背景图像的 url，我可以访问单个图像，因此所有 div 都填充了相同的图像。

有没有办法通过 url 用单独的图像填充每个创建的 div？创建的 div 数量与媒体文件中的图像数量相同。

    $('.my-media').html('');
    media.forEach(function (mediaItem) {
      var div = $('<div>');
      $(div).addClass("class-a");
      $(div).addClass("class-b");
      $(div).css('background-image', 'url(media/0.jpg)');
      $(".my-media").append(div)
    });
  } 

**更新 - 我已将代码更改为：

    $('.my-media').html('');
    media.forEach(function (mediaItem) {
      var div = $('<div>');
      $(div).addClass("class-a");
      $(div).addClass("class-b");
      for (let i=0; i < mediaItemIndex.length; i++){
        $(div).css('background-image', `url('media/${mediaItemIndex[i]}.jpg')`); 
      }

      $(".my-media").append(div)
    });
  } 

where 
``` var mediaItemIndex = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
    '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']

但这现在只显示所有 div 的最终图像。同样，我们将不胜感激任何和所有帮助/建议。

最终更新：我已经解决了这个问题。 图像的路径文件存储在“media_url”下的对象数组中。通过使用.replace("../","")，我摆脱了文件路径中不必要的部分并且可以访问图像。

我最初尝试访问图像的方式失败了，因为它在循环中创建了一个循环。 forEach 循环已经在遍历图像，所以当我使用 for(let i =0;... 时，我创建了一个只显示最终图像的无限循环。

替换此行$(div).css('background-image', 'url(media/0.jpg)'); 用我第一次编辑的这一行 $(div).css('background-image', `url(${mediaItem.media_url.replace("../","")})`);

表示每张图片只显示一次 - 即问题已解决。

感谢大家的建议！

Answer 1

如果我理解正确的话，就是这里。

$('.my-media').html('');
media.forEach(function (mediaItem, mediaItemIndex) {
  var div = $('<div>');
  $(div).addClass("class-a");
  $(div).addClass("class-b");
  $(div).css('background-image', `url(media/${mediaItemIndex}.jpg)`);
  $(".my-media").append(div)
});