Jquery 在使用html模板渲染的卡中动态显示图像,但未正确显示图像

Jquery 在使用html模板渲染的卡中动态显示图像,但未正确显示图像,jquery,html,asp.net,ajax,asp.net-mvc,Jquery,Html,Asp.net,Ajax,Asp.net Mvc,我试图使用从服务器获得的json数据在我的网页上显示一些信息,但是图像没有正确显示在相应的卡上 这是正在转换为Json并发送到浏览器的类 public class AgendaViewModel { public string Date { get; set; } public string Time { get; set; } public string Title { get; set; } public List<string> _standa

我试图使用从服务器获得的
json
数据在我的网页上显示一些信息,但是图像没有正确显示在相应的卡上

这是正在转换为Json并发送到浏览器的类

public class AgendaViewModel
{
    public string Date { get; set; }
    public string Time { get; set; }
    public string Title { get; set; }

    public List<string> _standardSpeakers;
    public List<string> StandardSpeakers { get { return _standardSpeakers ?? (_standardSpeakers = new List<string>()); } set { _standardSpeakers = value; } }

}
服务器正在以正确的格式和顺序返回数据,但当我使用上述Ajax的成功代码显示此数据时,Keynote Speaker的图像没有正确反映在正确的卡片上,即大多数卡片显示相同的图像。我认为这与类有关,这个类渲染图像,即使图像不属于卡

这是一张示例卡,它应该显示各个会话的图像(实际图像故意隐藏在图片中)


图像url是否正确?是的,图像url非常好。。有些卡的数据库中没有图像,有些卡有1个,有些卡有2个或更多。。但大多数卡片都显示相同的图像。$(“#img0.keynotespeakers list”).append(img);你在哪里声明了img变量?@vadivela我很抱歉,这是在准备/重构在线发布的代码时输入的错误。。。现在更新了那个部分。
<section>
<div class="container">
    <div class="row">

        <div class='row card-list'>
            @*Agenda will be added here dynamically using AJAX call.*@
        </div>

        <template id="keynote-speaker-card">
            <li><a href=""><img class="speakerImg1" /></a></li>
        </template>

        <template id="agenda-card">
            <div class="col-lg-12 col-12">
                <div class="main card">
                    <div class="card-header-1 pt-20">
                        <div class="row">
                            <div class="col-lg-12">
                                <h6 class="sessionDate"></h6>

                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row" style="border-bottom: 1px solid #ecebeb;">
                            <div class="col-lg-2 col-12">
                                <div class="row ">
                                    <div class="col-12 col-lg-12">
                                        <h6 class="sessionTime"></h6>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-10 col-12">
                                <div class="row">
                                    <div class="col-lg-12 col-12">
                                        <h4 class="sessionTitle "></h4>
                                    </div>
                                    <div class="col-lg-12 col-12 mt-10">
                                        <h5 class="mb-20">Speakers</h5>
                                        <h6 class="keynoteHeading" style="display:none">Keynote:</h6>
                                        <ul class="custom-ul-image">
                                            <div id="img0" class="keynote-speakers-list">
                                            </div>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>

    </div>
</div>
$('#btnSearch').click(function (e) {

        e.preventDefault();
        $('.card-list').html("");
        var data = $('#searchForm').serializeArray();
        $.ajax({
            type: "POST",
            url: '@Url.Action("GetAgenda", "Agenda")',
            data: data,
            success: function (response) {
                response.search.Results.forEach(function (ele) {
                    var card = $($('#agenda-card').html());
                    card.find('.sessionDate').text(ele.Date);
                    card.find('.sessionTime').text(ele.Time);
                    card.find('.sessionTitle').text(ele.Title);
                    ele.StandardSpeakers.forEach(function (speaker) {
                        var keynoteSpeakerCard = $($('#keynote-speaker-card').html());
                        keynoteSpeakerCard.find('.speakerImg1').attr('src', speaker);
                        $('#img0.keynote-speakers-list').append(keynoteSpeakerCard);
                    });
                    $('.card-list').append(card);
                });
            },
        });
    });