我想從遠程網站加載圖像到div，使用ajax + jquery

我嘗試加載圖像。但每次控制檯日誌設置「錯誤」。我想從遠程網站加載圖像到div，使用ajax + jquery

我的錯誤在哪裏？ 第一種方式

$('#cont').click(function() { 
    $.ajax({ 
    type: "GET", 
    url: "http://pp.vk.me/c608129/v608129926/13d7/M78M4KmekWI.jpg", 
    dataType: "image/gif", 
    success: function(img) { 
     i = new Image(); 
     i.src = img; 
     $(this).appned(i); 
    }, 
    error: function(error, txtStatus) { 
     console.log(txtStatus); 
     console.log('error'); 
    } 
    }); 
    });

來源

2014-02-24 user3044272

'append'而不是'appned' – Ani

你不能讓Ajax請求到外部網站，除非他們明確地允許它。這就是所謂的same origin policy。

就你而言，你甚至不需要發出Ajax請求。您應該URL剛分配到圖像的src屬性：

$('#cont').click(function() { 
    var i = new Image(); 
    i.src = 'http://pp.vk.me/c608129/v608129926/13d7/M78M4KmekWI.jpg'; 
    $(this).append(i); 
});

以上的jQuery樣：

$('#cont').click(function() { 
    $('<img />', { 
    src: 'http://pp.vk.me/c608129/v608129926/13d7/M78M4KmekWI.jpg' 
    }).appendTo(this); 
});

瀏覽器將自身加載圖像。

可以綁定一個error event handler的形象和做任何你想做的事，如果圖像是不可用的，和load event handler得到通知圖像加載：

$('#cont').click(function() { 
    $('<img />', { 
    src: 'http://pp.vk.me/c608129/v608129926/13d7/M78M4KmekWI.jpg', 
    on: { 
     load: function() { 
      console.log('Image loaded successfully'); 
     }, 
     error: function() { 
      console.log('Error while loading image'); 
     } 
    } 
    }).appendTo(this) 
});

來源

2014-02-24 03:48:00

@ user3044272是的。像Felix Kling說，爲什麼你需要爲圖像調用ajax。只需將其分配給src。 –

但保存img在自己的服務器（使用PHP）？ – user3044272

即使該Ajax調用工作，它會返回圖像的字節。您不能將img src設置爲img的字節。 img src是圖片的網址。 – joseph

如果你有需要圖像的字節的用例通過Ajax調用被轉移再看看這個帖子：http://stick2basic.wordpress.com/2013/01/24/loading-image-dynamically/

綜上所述，

返回映像的後端服務器需要發送圖像字節的base64編碼。
AJAX調用設置的IMG節點的src爲「數據：圖像/ PNG; BASE64，」 +字節

你甚至可能能夠轉換爲字節從AJAX調用返回的編碼上的base64客戶端也是如此。更多信息：(Javascript) Convert Byte[] to image

來源

2014-02-24 03:57:20 joseph

我想從遠程網站加載圖像到div，使用ajax + jquery

回答

相關問題