使用JQuery将XML图像路径转换为图像

当我在我的网站上读取 XML文件时,我正在尝试将路径转换为图像到实际图像.我的XML结构是：

<?xml version="1.0" encoding=UTF=8?>
    <peopleNetwork>
     <person id="1">
      <name>Alice</name>
      <friend>Ruby</friend>
      <image>images/ruby.jpg</image>
     </person>
     <person id="2">
      <name>Tom</name>
      <friend>Katty</friend>
      <image>images/ketty.jpg</image>
     </person>
    </peopleNetwork>

这就是我在我的页面上阅读XML的方式：

$("#container").append($(xmlDoC).find('person[id="1"]').text() + '<br/>')

上面的代码行当前读取的是第一人的所有信息,并以文本格式显示,如下所示：

Alice Ruby图片/ ruby​​.jpg

我想要做的是将图像路径转换为实际图像,在线搜索我能够编写此代码：

<img src"images/' +$(this).find("image").text() + '"alt=$(this).find('person[id="1"]').text()>);

我不知道如何将它们组合在一起,我是相当新的并尝试使用它但在每次尝试都失败了 – 任何帮助都会受到赞赏,如果我不够清楚,请告诉我.

编辑：我写了这个：

$("#container").append('<div class"peopleNetwork"><img src="images/' + $(xmlDoC).find("image").text() + alt="' + $(xmlDoC).find('person[id="1"]').text())

我不确定这是否正确但是当我运行我的网站时它会出现此错误

Uncaught ReferenceError: Invalid left-hand side in assignment

$.ajax({
	type: "GET",url: "./peopleNetwork.xml",datatype: "xml",success: function(xml){
		var xmlDoc = $.parseXML(xml),$xml = $(xmlDoc);
		$xml.find("person").each(function(){
			var image = $(this).children("image").text();
			$("#container").append($(this).children("name").text() + " " + $(this).children("friend").text() + " " + '<img src="./' + image + '">' + "<br />");
		});
	}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>