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

My html:

            <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>

This is url: how can i display these images

1 answer

  • answered 2020-06-02 11:17

    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);
    };"GET", "", true);
    var text = '{ "page1":"", "page2":"", "page3":"", "page4":"", "page5":"", "page6":"", "page7":"", "page8":"", "page9":"", "page10":"" }';
    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>