使用Javascript从XML文件显示图像

时间:2017-02-22 11:00:23

标签: javascript html xml

我有一些带有一些数据的XML文件。我能够阅读和显示文本。我现在正在尝试从XML文件中读取和显示图像。

我想我能够读取图像文件标签,但是当我尝试显示它时,它给我一个错误“无法加载资源:net :: ERR_FILE_NOT_FOUND”。我希望图像显示在div中。

我已尝试console.log(img);并显示images/empire_burlesqueimages/hide_your_hearts

我想用Javascript做这件事。

XML文件

<CATALOG>
    <CD>
        <TITLE>Empire Burlesque</TITLE>
        <IMAGE>images/empire_burlesque.jpg</IMAGE>
    </CD>
    <CD>
        <TITLE>Hide your heart</TITLE>
        <IMAGE>images/hide_your_hearts.jpg</IMAGE>
    </CD>
<CATALOG>

HTML

<script>
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
           xmlhttp = new XMLHttpRequest();
       } else {// code for IE6, IE5
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
       }
            xmlhttp.open("GET", "text.xml", false);
            xmlhttp.send();
            xmlDoc = xmlhttp.responseXML;

            var x = xmlDoc.getElementsByTagName("CD");

        for ( i = 0; i < x.length; i++) {

            //Here I want to image to be displayed inside a div.                
            var img = document.createElement("img");
            img.src = x[i].getElementsByTagName("IMAGE")[0].childNodes[0].nodeValue;
            document.getElementById("img1").innerHTML = img;


}
</script>

<div id="contentimage1">
<img id="img1" height="100%" width="100%" >
</div>

0 个答案:

没有答案