У меня есть задание для домашней работы, которую мне дали, где мне нужно создать простую галерею, которая отображает 4 изображения.

Мне нужно поместить все изображения в массив, где каждая фотография будет в объекте JSON и загрузить изображения из массива. Вот где я сейчас нахожусь:

<body>
 <div class="images">

</div>

(function (){
    let array_img = [
        {
            filename:"20140222_131314",
            title:"img1",        

        },
        {
            filename:"20140712_203709",
            title:"img2",

        },
        {
            filename:"20190318_182928",
            title:"img3"
        },
        {
            filename:"20190422_181219",
            title:"img4"
        }
    ]
    for (var i = 0 ; i<array_img.length ; i++){
        arr_img = array_img[i]
        var container = $(".images");
        $container.append("<img/>").attr("src=/Photos/20140222_131314.jpg")

    }

}());

Или я должен создать дополнительную переменную img = array_img [i] и создать из нее текстовый узел и после этого добавить. Но как добавить и установить путь src ко всем изображениям. Может быть, мне нужно создать и очистить "src" для объекта структуры? Но я что-то упустил. Кто-нибудь может мне помочь?

0
Jefry90

2 ответа

Я сделал это так, и теперь это работает. Я не знаю, если это лучший способ сделать это, но ...

(function (){
    let array_img = [
        {
            filename:"20140222_131314.jpg",
            title:"img1",  


        },
        {
            filename:"20140712_203709.jpg",
            title:"img2",

        },
        {
            filename:"20190318_182928.jpg",
            title:"img3"
        },
        {
            filename:"20190422_181219.jpg",
            title:"img4"
        }
    ]
    for (var i = 0 ; i<array_img.length ; i++){
        var arr_img = array_img = [i]
        var $container = $(".images");
        $container.append(arr_img[i+1],"<img src=photos/20140222_131314.jpg>")
        $container.append(arr_img[i+1],"<img src=photos/20140712_203709.jpg>")
        $container.append(arr_img[i+1],"<img src=photos/20190318_182928.jpg>")
        $container.append(arr_img[i+1],"<img src=photos/20190422_181219.jpg>")


    }

}());

Это должно бежать. Убедитесь, что у вас есть $ перед вашими переменными.

(function() {
  let array_img = [{
      filename: "20140222_131314",
      title: "img1",

    },
    {
      filename: "20140712_203709",
      title: "img2",

    },
    {
      filename: "20190318_182928",
      title: "img3"
    },
    {
      filename: "20190422_181219",
      title: "img4"
    }
  ]
  for (var i = 0; i < array_img.length; i++) {
    $arr_img = array_img[i]
    var $container = $(".images");
    $container.append("<img src=/Photos/"+$arr_img[0]+".jpg/>");

  }

}());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="images">

</div>
58545372