Изображения из модели данных не загружаются в модал Bootstrap - PullRequest
Новая
       6

Изображения из модели данных не загружаются в модал Bootstrap

0 голосов
/ 22 мая 2018

На своей странице я загрузил изображения в карусель.Изображения загружаются из модели данных.Проверенный вид изображения показывает, что 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'));
});
...