javascript - 使用 AJAX 从 XML 显示图像

Question

我正在学习 AJAX，并尝试从 XML 联系人调用图像并将其显示在表格中。

XML 联系方式如下:

<contact>
  <name>xxx xxx</name>
  <post>xxx xxx</post>
  <company>xxx</company>
  <address>xxx</address>

  <telephone>xxx</telephone>
  <mobile>xxx</mobile>

  <email>xx@xxx</email>
  <photo>img/xxx.jpg</photo>
</contact>

我调用它的 Ajax 如下:

function myFunction(xml) {
        var i;
        var xmlDoc = xml.responseXML;
        var table = "<tr><th>Name</th><th>Post</th><th>Company</th><th>Address</th><th>Telephone</th><th>Mobile</th><th>Email</th><th>Photo</th></tr>";
        var x = xmlDoc.getElementsByTagName("contact");
        for (i = 0; i < x.length; i++) {
          table += "<tr><td>" +
            x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue +
            "</td><td>" +
            x[i].getElementsByTagName("post")[0].childNodes[0].nodeValue +
            "</td><td>" +
            x[i].getElementsByTagName("company")[0].childNodes[0].nodeValue +
            "</td><td>" +
            x[i].getElementsByTagName("address")[0].childNodes[0].nodeValue +
            "</td><td>" +
            x[i].getElementsByTagName("telephone")[0].childNodes[0].nodeValue +
            "</td><td>" +
            x[i].getElementsByTagName("mobile")[0].childNodes[0].nodeValue +
            "</td><td>" +
            x[i].getElementsByTagName("email")[0].childNodes[0].nodeValue +
            "</td><td>" + 
            x[i].getElementsByTagName("photo")[0].childNodes[0].nodeValue +
            "</td></tr>";
        }

当前表格显示有照片标签，但仅显示文本“img/xxx.jpg”，而不是我希望它显示实际图像。

Answer 1

您需要实现<img>标记，否则(正如您所发现的)您所做的只是显示路径。

尝试在末尾替换以下行...

        "</td><td>" + 
        x[i].getElementsByTagName("photo")[0].childNodes[0].nodeValue +
        "</td></tr>";

与...

        "</td><td><img src='" + 
        x[i].getElementsByTagName("photo")[0].childNodes[0].nodeValue +
        "'/></td></tr>";