javascript - 输入 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');
    });
    } }});}); });

这是输入用户 ID 时需要单击的文本框/按钮:

<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>');