javascript - 单击缩略图时图像未显示在模式中

Question

当我从图库中选择缩略图时，我希望弹出模式窗口并显示其中的图像。它弹出，但图像未显示，我收到“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>

Answer 1

您的以下行似乎不正确:

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

获取数据属性，如更改为

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