Question

当我从图库中选择缩略图时，我希望弹出模态窗口并在里面显示图像。它弹出，但图像没有显示，我得到了＆＃39; alt＆＃39;消息。

这是我的HTML和javascript。

＆＃13;

$("#pop").on("click", function () {
    $('#modalPreview').attr('src', $('#imageresource').attr('imagesrc'));
    $('#imageModal').modal('show');

});

＆＃13;

<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>

＆＃13;

Answer 1

您的以下行似乎不正确：

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

获取数据属性，作为

的更改

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

缩略图点击时图像未显示在模态中

1 个答案: