来自数据模型的图像未加载到Bootstrap模式中

Question

在我的页面上，我将图像加载到旋转木马中。图像从数据模型加载。检查到的图像视图显示data-img-url有一个完整的URL。当我点击图像时，模态将打开，但没有图像。我应该进行哪些校正，以便在模态窗口中渲染图像？下面是html ...

<ul id="sync1">
    <li class="item">
        @*This is the primary image*@
        <a href="#myModal" data-toggle="modal" data-img-url="@Model.ImageLargePath">
            <img src="@Model.ImageLargePath" data-src="@Model.ImageLargePath" alt="@(Model.Attributes?.Value("SEODescription"))" title="@Model.SEODescription" class="carousel-img" />
        </a>
        <a class="carouselImageText">@(Model.SEODescription.ToString())</a>
    </li>
    @if (Model.AlternateImages != null && Model.AlternateImages.Any())
    {
        //This is where we load all the images into the primary carousel IF we have alternate images
        foreach (var image in Model.AlternateImages)
        {
            <li class="item">
                <a href="#myModal" data-toggle="modal" data-img-url="@Model.ImageLargePath">
                    <img src="@image.ImageLargePath" class="carousel-img" />
                </a>
            </li>
        }
    }
</ul>

这是模态......

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body text-center">
                <img class="" src="#" />
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>
        </div>
    </div>
</div>

以下是javascript ...

$('#sync1 img').click(function (e) {
    $('#myModal img').attr('src', $(this).attr('data-img-url'));
});