How to display images in html from json object url in turn.js to display in background

My html:

        </div>
            <div style="background-image:url(pages/2.jpg)"></div>
            <div style="background-image:url(pages/3.jpg)"></div>
            <div style="background-image:url(pages/4.jpg)"></div>
            <div style="background-image:url(pages/5.jpg)"></div>
            <div style="background-image:url(pages/6.jpg)"></div>
            <div style="background-image:url(pages/7.jpg)"></div>
            <div style="background-image:url(pages/8.jpg)"></div>
            <div style="background-image:url(pages/9.jpg)"></div>
            <div style="background-image:url(pages/10.jpg)"></div>
            <div style="background-image:url(pages/11.jpg)"></div>
            <div style="background-image:url(pages/12.jpg)"></div>
        </div>

This is url: http://18.224.23.171/images/magazine/getImages.json how can i display these images

1 answer

  • answered 2020-06-02 11:17 focus.style

    You didn't clarified how are you going to process JSON, using front-end or back-end. Here a solution using JavaScript.

    // This part you will need to get you json from remote server
    /*
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var obj= JSON.parse(this.responseText);
      }
    };
    xmlhttp.open("GET", "http://18.224.23.171/images/magazine/getImages.json", true);
    xmlhttp.send();
    */
    var text = '{ "page1":"http://18.224.23.171/images/magazine/p1.jpg", "page2":"http://18.224.23.171/images/magazine/p2.jpg", "page3":"http://18.224.23.171/images/magazine/p3.jpg", "page4":"http://18.224.23.171/images/magazine/p4.jpg", "page5":"http://18.224.23.171/images/magazine/p5.jpg", "page6":"http://18.224.23.171/images/magazine/p6.jpg", "page7":"http://18.224.23.171/images/magazine/p7.jpg", "page8":"http://18.224.23.171/images/magazine/p8.jpg", "page9":"http://18.224.23.171/images/magazine/p9.jpg", "page10":"http://18.224.23.171/images/magazine/p10.jpg" }';
    
    var obj = JSON.parse(text);
    
    Object.entries(obj).forEach(([key, value]) => {
      document.getElementById("demo").insertAdjacentHTML('beforeEnd', "<div style='background-image:url(" + value + ")'></div>");
    });
    #demo > div {
      width: 50px;
      height: 100px;
      background-size: cover;
      display: inline-block;
    }
    <div id="demo"></div>