Отображение изображения с использованием 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>";
        }

В настоящее время таблица отображается с тегом Photo, но только текст «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>";