圖片未加載jQuery的移動圖像彈出

Question

當我從錨標記調用它的工作;

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

但是，當我從jQuery Mobile的圖像彈出式調用，它不工作了;

$("#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>"); 

我可以看到彈出框但不是圖像，而是顯示問號。

Answer 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'); 
});