當輸入ID時，將圖像添加到來自json文件的警報

Question

因此，當用戶輸入ID時，會出現一個警告框。在警告框中顯示名稱，但是我也想讓圖像顯示爲他們的姓名和歡迎信息。

這是我的JSON：

{ 
"user":[ 
{ 
"ID" : "001", 
"Imgpath":"image/iphone5.jpg", 
"name": "Zara Ali" 

}, 
{ 
"ID" : "002", 
"Imgpath":"image/iphone5.jpg", 
"name": "Laura Ali" 
}, 
{ 
"ID" : "003", 
"Imgpath":"image/iphone5.jpg", 
"name": "Courtney Ali" 
}, 
{ 
"ID" : "004", 
"Imgpath":"image/iphone5.jpg", 
"name": "Max Ali" 
} 
] 
} 

這是我的腳本拉動名稱的對話框：

$(document).ready(function() { 
//Hide alert when page loads 
$("#loginalert").hide();  
$("#loginbtn").click(function(event){ 
//console.log("clicked login"); 
$.getJSON('result.json', function(jd) { 
    var id = $('#userName').val(); 
    //console.log(id); 
    for (var i=0; i<jd.user.length; i++) { 
    if (jd.user[i].ID == id) { 
     $('#loginalert').html('<p> Welcome: ' + jd.user[i].name + '</p>');  
     //show the alert after loading the information 
     $("#loginalert").stop().fadeIn('slow').animate({ opacity: 1.0 }, 3000)('slow', function() { 
     $('#contact').fadeIn('slow'); 
    }); 
    } }});}); }); 

，這是文本框/按鈕，進入TE用戶時，需要點擊編號：

<div class="alert alert-info"> 
<input type="text" id="userName" value> <button type="button" id="loginbtn" class="btn btn-primary btn-md">Login</button></div> 

我想包括這樣做的圖像，但它沒有工作：

if (jd.user[i].ID == id) { 
    $('#loginalert').html('<p> Welcome: ' + jd.user[i].name + jd.user[i].imgpath +'</p>');  
    //show the alert after loading the information 

千恩萬謝

Answer 1

嗯，你幾乎得到了它。的

只是代替輸出imgpath文本，把它放在一個img標籤，就像這樣：

$('#loginalert').html('<img src="' + jd.user[i].imgpath + '"><br><p> Welcome: ' + jd.user[i].name + '</p>');