title: Load local image using Json
body: <p>I trying to redo a site someone has. I am trying to load a local image to the javascript but with no luck. Here is the JSON file. I just included the image file in the third line.</p>
  
  <pre><code>{"list":
  [
  "Event Title 1","Description 1","Date 1",
  "Event 2","Stuff happening 2","Date 2",
  "Event 3","gallery/photo2.jpg","Date 3"
  ]
  }
  </code></pre>
  
  <p>And here is the script</p>
  
  <pre><code>      for(var i=0;i&lt;9;i+=3){
          str=eventarray[i+2];
          var dt = document.createElement("h2");
          //dt.className="date2";
          //dt.style.backgroundColor="purple";
          dt.style.color="white";
          dt.style.fontSize="30px";
  
          var t2=document.createTextNode(str);
          dt.appendChild(t2); 
          dt.id="evnt"+ i;
  
          var brk = document.createElement("br");
          var brk2 = document.createElement("br");
  
          str = eventarray[i];
          var ev=document.createElement("h1");
          //ev.className="edate";
          ev.style.fontSize="35px";
          ev.id = "event" + i.toString();
          var t=document.createTextNode(str);
          ev.appendChild(t); 
  
          str = eventarray[i+1];
          var des=document.createElement("p");
          //des.className="edate";
          des.style.fontSize="16px";
          des.style.marginTop="10px";
          des.id = "des" + i.toString();
          var t2=document.createTextNode(str);
          des.appendChild(t2); 
  
          var box = document.createElement("div");
          box.style.backgroundColor="white";
          box.style.borderRadius="10px"
          box.style.textAlign="center"
          box.style.marginBottom="100px";
          //box.className = "edate";
          var dt2 = document.createElement("div");
          dt2.style.minWidth = "100%";
          dt2.style.backgroundColor= "#c59ed1";
          dt2.appendChild(dt);
          box.appendChild(dt2);
          box.appendChild(brk);
          box.appendChild(ev);
          box.appendChild(brk2);
          box.appendChild(des);
              document.getElementById("events").appendChild(box);
      }
  </code></pre>
  
  <p>Here's what it looks on site:
  <img src="https://i.stack.imgur.com/8ir9i.png" alt="enter image description here"></p>
  
  <p>I'm not to familiar with JSON but with little JQuery skills I have I tried to replace the creatTextNode with createElement and then tried to append the str variable to the new Element but the whole page broke. Any guidance will be greatly appreciated.</p>