缩略图单击时图像未以模式显示

Image not showing in modal on thumbnail click

本文关键字:模式 显示 图像 略图 单击      更新时间:2023-09-26

当我从图库中选择缩略图时,我希望模式窗口弹出并显示里面的图像。它弹出了,但图像没有显示,我收到了"alt"消息。

这是我的HTML和javascript。

$("#pop").on("click", function () {
    $('#modalPreview').attr('src', $('#imageresource').attr('imagesrc'));
    $('#imageModal').modal('show');
});
<div id="row">
                <div id="sortable">
                    @foreach (var image in Model.Images)
                    {
                        @*<li>this is an image</li>*@
                        <div class="col-sm-6 col-md-4">
                            <div class="thumbnail">
                                @{
                                    var base64 = Convert.ToBase64String(image.ImageThumbnail);
                                    var thumbSrc = String.Format("data:image/gif;base64,{0}", base64);
                                    var base64Modal = Convert.ToBase64String(image.Image);
                                    var imgSrcModal = String.Format("data:image/gif;base64,{0}", base64Modal);
                                }
                                <a id="pop" href="" data-toggle="modal" data-target="#myModal">
                                    <img id="imageresource" src="@thumbSrc" data-imagesrc="@imgSrcModal" alt="image not found" width="203" height="136" />
                                </a>
                                <div class="caption">
                                    <h3>Thumbnail label</h3>
                                    <p>...</p>
                                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                                </div>
                            </div>
                        </div>
                    }
                </div>
                <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <a href="" data-toggle="modal" data-target="#myModal">
                                <img id="modalPreview" alt="image not found" width="255" height="255" />
                            </a>
                        </div>
                    </div>
                </div>
            </div>

您的以下行似乎不正确:

$('#modalPreview').attr('src', $('#imageresource').attr('imagesrc'));

获取数据属性,作为的更改

$('#modalPreview').attr('src', $('#imageresource').data('imagesrc'));
//or
$('#modalPreview').attr('src', $('#imageresource').attr('data-imagesrc'));