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

Question

当我在网站上的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 Images/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

Answer 1

您只需要在.append()语句中创建<img>标签。

$.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>