图像未在 jquery 移动图像弹出窗口中加载答案

【问题标题】：Image not loaded in jquery mobile image popup图像未在 jquery 移动图像弹出窗口中加载
【发布时间】：2014-02-10 07:49:27
【问题描述】：

当我从锚标记调用时，它正在工作；

var surl = "http://192.168.1.233";
$("#imgLink").html("<a href='"+ surl + "/leave/" + filename + "'>" + filename + "</a>");

但是当我从 jquery 移动图像弹出窗口调用时，它不再工作了；

$("#imgLink").html("<a href='#popupPhoto' data-rel='popup' data-position-to='window' data-role='button' data-inline='true' data-transition='fade'>"+
                                            filename + "</a>"+
                                            "<div data-role='popup' id='popupPhoto' data-overlay-theme='a' data-theme='d' data-corners='false'>"+
                    "<a href='#' data-rel='back' data-role='button' data-theme='a' data-icon='delete' data-iconpos='notext' class='ui-btn-right'>Close</a>"+
                    "<img class='popphoto' src='"+ surl + "/leave/" + filename +"' style='width:150px; height:150px;'></div>");

我可以看到弹出框，但不是图像，而是问号。

【问题讨论】：

标签： jquery html jquery-mobile popup

【解决方案1】：

弹出标记超出内容但仍在页面内。

这是一个DEMO

在 2 个单独的变量中构建链接按钮标记和弹出标记。将链接附加到容器 (#imgLink) 并将弹出窗口附加到页面。最后触发页面刷新。

$(document).on("pageinit", "#page1", function(){
    var filename = "http://lorempixel.com/150/150/sports";

    var markup = '<a href="#popupPhoto" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="fade">' + filename + '</a>';

    var popup = '<div data-role="popup" id="popupPhoto" data-overlay-theme="a" data-theme="d" data-corners="false"><a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a><img class="popphoto" src="' + filename + '" style="width:150px; height:150px;"></div>';

    $("#imgLink").empty().append(markup);
    $("#page1").append(popup).trigger('create');
});

【讨论】：