使用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/>') 

什麼上面的代碼行確實是目前所有信息讀取的人之一，顯示在文本格式，像這樣：

愛麗絲紅寶石圖像/ 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({ 
 
\t type: "GET", 
 
\t url: "./peopleNetwork.xml", 
 
\t datatype: "xml", 
 
\t success: function(xml){ 
 
\t \t var xmlDoc = $.parseXML(xml), 
 
\t \t $xml = $(xmlDoc); 
 
\t \t $xml.find("person").each(function(){ 
 
\t \t \t var image = $(this).children("image").text(); 
 
\t \t \t $("#container").append($(this).children("name").text() + " " + $(this).children("friend").text() + " " + '<img src="./' + image + '">' + "<br />"); 
 
\t \t }); 
 
\t } 
 
});

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