Question

我试图重做一个有人的网站。我正在尝试将本地图像加载到javascript但没有运气。这是JSON文件。我只是将图像文件包含在第三行。

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

这是脚本

      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);
    }

以下是网站上的内容： enter image description here

我不熟悉JSON，但是我有很少的JQuery技能，我尝试用createElement替换creatTextNode，然后尝试将str变量附加到新元素，但整个页面都破了。任何指导将不胜感激。

Answer 1

此处的问题是，您不能只将“{1}}变量”追加到任何元素 - 您必须将其分配给str的{{1}}属性（没有{{ 1}}（大多数）其他元素类型）。另一个问题是，您目前无法知道您的描述文本是纯文本还是纯文本。要么你需要在json列表中建立这种区别，要么测试它并相应地构建你的页面：

src

如果它在HTMLImageElement字符串末尾或文本节点处检测到图像文件扩展名，则此非常快速的测试会将src创建为图像如果没有。 实现目标是一种可怕的方式 - 这是一个例子 - 找到一种更健壮的方式。

这是一个小提示，展示：http://jsfiddle.net/tN9mC/

另一个问题是你的示例中的url没有指向“本地”文件 - 为此您需要提供一个完全限定的URL，例如“file：/// C：/ Users / public / documents /images/gallery/photo2.jpg“等。只使用”gallery / photo2.jpg“会使它成为一个相对网址，指向该网页当前所在的任何域/路径上的目录/文件 - 例如，小提琴尝试加载“http://fiddle.jshell.net/tN9mC/show/gallery/photo2.jpg”

使用Json加载本地映像

1 个答案: