我們在開發網頁的過程中，經常會使用 Ajax 技術來實現頁面無刷新的數據交互。其中，經常會遇到一個問題，就是通過 Ajax 加載的圖片，在頁面中顯示出來時出現無法顯示的情況。本文將圍繞這一問題展開討論，并給出一些可能的解決辦法。
舉個例子吧！假設我們的網站有一個圖庫頁面，通過 Ajax 從服務器端獲取圖片的 URL，并將這些 URL 設置為標簽的src屬性來加載圖片。然而，當我們打開圖庫頁面時，發現圖片根本沒有顯示出來。我們檢查了一下代碼，發現src屬性的值確實是正確的，但圖片卻無法正常顯示。
為了更好地理解這個問題，我們來看一下 Ajax 的工作原理。當我們使用 Ajax 請求從服務器端獲取數據時，這個請求是異步的，即不會阻塞頁面的加載。而標簽則是同步加載的，它會在頁面加載完畢后立即加載并顯示圖片。這就導致了一個問題：當 Ajax 請求返回數據后，可能頁面已經加載完畢，此時再將圖片的 URL 賦值給src屬性已經來不及了。
為了解決這個問題，我們可以通過以下幾種方法來加載 Ajax 返回的圖片。
首先，我們可以在 Ajax 請求返回數據后，手動創建一個新的元素，并將圖片的 URL 賦值給它的src屬性。然后，將這個新創建的元素插入到頁面中的某個位置。這樣，圖片就會正常加載并顯示出來了。

html
$.ajax({
url: 'example.com/gallery',
success: function(data) {
var imgUrl = data.imgUrl;
var newImg = document.createElement('img');
newImg.src = imgUrl;
$('body').append(newImg);
}
});

其次，我們可以在 Ajax 請求返回數據后，先暫時將圖片的 URL 存儲在某個變量中，然后等頁面加載完畢后再將這個變量中的 URL 賦值給標簽的src屬性。這樣，即使圖片的 URL 賦值操作在頁面加載完畢后進行，圖片依然能夠正常加載并顯示出來。

html
var imgUrl;
$.ajax({
url: 'example.com/gallery',
success: function(data) {
imgUrl = data.imgUrl;
}
});
$(window).on('load', function() {
$('img').attr('src', imgUrl);
});

第三種方法是在 Ajax 請求返回數據后，將圖片 URL 保存在標簽的自定義屬性中，等到頁面加載完畢后再通過 JavaScript 代碼讀取該自定義屬性的值，并將其賦值給src屬性。通過這種方式，我們既能夠保證圖片的正常加載，又能夠避免頁面加載過程中的阻塞。

html
$.ajax({
url: 'example.com/gallery',
success: function(data) {
var imgUrl = data.imgUrl;
$('img').data('img-url', imgUrl);
}
});
$(window).on('load', function() {
$('img').each(function() {
var imgUrl = $(this).data('img-url');
$(this).attr('src', imgUrl);
});
});

綜上所述，通過以上三種方法，我們可以解決由 Ajax 引入圖片無法正常顯示的問題。根據實際需求選擇其中一種方法，并將其實現在代碼中，就能夠讓通過 Ajax 加載的圖片在頁面中正確地顯示出來了。希望本文能夠幫助您解決類似的問題！