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

I am trying to convert a path to image to an actual image when I read in the XML file on my website. The structure of my XML is:

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

This is how I am reading in the XML on my page:

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

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

What the above code line does is currently reads in all information for person one and displays it in text format, like so:

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

Alice Ruby images/ruby.jpg

Alice Ruby图片/ ruby​​.jpg

What I would like to do is convert the image path to an actual image, searching online I was able to write this code:

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

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

I am not sure how I can put these together, I am fairly new and tried playing around with it but failed at each attempt - any help would be appreciated, let me know if I was not clear enough.

我不知道我怎么能把这些放在一起,我是相当新的并试着玩它但是在每次尝试都失败了 - 任何帮助都会受到赞赏,如果我不够清楚,请告诉我。

EDITED:I wrote this:

编辑:我写了这个:

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

I am not sure if this is correct or not but when I run my website it gives this error

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

Uncaught ReferenceError: Invalid left-hand side in assignment

1 个解决方案

#1

You just needed to create a <img> tag within your .append() statement.

您只需要在.append()语句中创建一个标记。

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