使用Json加载本地图像

Question

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.

{"list":
[
"Event Title 1","Description 1","Date 1",
"Event 2","Stuff happening 2","Date 2",
"Event 3","gallery/photo2.jpg","Date 3"
]
}

And here is the script

      for(var i=0;i<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);
    }

Here's what it looks on site:

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.

Answer 1

The problem here is you cannot just "append" your str variable to just any element - you must assign it to the src property of an HTMLImageElement (there is no src on (most) other element types). The other problem is that you currently have no way of knowing if your description text is just plain text or an img url. Either you need to build in this distinction to your json list, or test for it and build your page accordingly:

if ( str.match( /\.(?:jpe?g|png|tiff|gif)$/ ) ) {

    var t2 = document.createElement( 'img' );
    t2.src = str;

} else {

    var t2=document.createTextNode(str);

}

This very quick-n-dirty test creates t2 as an image if it detects a image file extension at the end of the str string, or a text node if it does not. It's a terrible way to achieve your goal - this is an example - find a more robust way.

Here's a fiddle demonstrating: http://jsfiddle.net/tN9mC/

Another problem is the url you have in your example does not point to a "local" file - for that you would need to give a fully-qualified url like "file:///C:/Users/public/documents/images/gallery/photo2.jpg" etc. Only using "gallery/photo2.jpg" will make it a relative url that points to that directory/file on whatever domain/path the page currently is on - for example, the fiddle tries to load " http://fiddle.jshell.net/tN9mC/show/gallery/photo2.jpg "