第一次發布到堆疊溢位，所以格式可能很不穩定:)
主要問題：Github Pages 不會加載我在網站構建后嘗試使用 jquery 獲取的影像
詳細資訊：我正在嘗試建立一個投資組合網站，頁面加載并正確加載了一些紋理和資產（主要是影像）。它甚至加載了一些我試圖解決問題的影像，但只有當我將它硬編碼到我的 index.html 中時。問題來了，目前，我有一個輪播，我想動態地將影像加載到其中（jquery 腳本進入檔案夾并抓取其中的所有影像并將其加載到輪播上）。但是這個腳本一直失敗，我得到一個（示例）“加載資源失敗：服務器回應狀態為 404 ()
/assets/images/General/:1”錯誤。
注意：在 VSCode 本地服務器上一切正常。
Jquery 代碼（在本地正確運行）：
let imgDir = "../assets/images/General/";
$(document).ready(function () {
$.ajax({
url: imgDir,
success: function (data) {
console.log(data);
$(data)
.find("a")
.attr("href", function (i, val) {
// Gets all image types
if (val.match(/\.(jpe?g|png|gif)$/)) {
// Used to remove the file path to get image name
let start, end;
for (let i = val.length - 1; i >= 0; i--) {
if (!end && val[i] == ".") {
end = i;
} else if (!start && val[i] == "/") {
start = i 1;
} else if (start && end) {
break;
}
}
// Creates carousel elements to show images and names
$(".names-track").append(
'<li ><h3>'
val.slice(start, end).replace(" ", " ")
"</h3></li>"
);
$(".carousel-track").append(
' <li ><img src="'
val
'" alt="Github Pages 不會加載我在網站構建后嘗試使用 jquery 獲取的影像"/></li>'
);
$(".carousel-nav").append(
'<button ></button>'
);
}
});
// Builds the carousel with the data
refreshCarousel(document.querySelector(".projects-carousel"));
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log("Status: " textStatus);
console.log("Error: " errorThrown);
},
});
});
我嘗試過的事情：
確保我路徑中的大小寫正確（應該是因為我已經可以手動加載一些相同的影像）。
嘗試添加一個 .nojekyll 檔案 [現已洗掉]（聽說可用于繞過 jekyll 構建，這會破壞某些資產和檔案夾的加載）。
嘗試更改路徑和檔案夾結構。
當前檔案夾結構：
- 主檔案夾
- 資產
- css
- 圖片
- 一般的
- images.png 這里
- 重點專案
- images.png 這里
- 專案
- images.png 這里
- 紋理
- images.png（在頁面顯示之前加載）
- 一般的
- js
- HTML
- 索引.html
- index.html（在 HTML 檔案夾中呼叫 index.html 的虛擬檔案）[正在正確加載]
- 資產
這可能與我使用 jquery 的方式有關，或者我在構建和顯示主頁后嘗試加載影像但我希望能夠將這些影像動態加載到輪播中，因為我可以以后只需在檔案夾中添加一個影像，它就會加載。同樣，我已經可以手動加載一些影像，因此路徑必須正確。視窗加載后我無法加載它們。
嘗試谷歌幾個小時，但沒有找到類似于我的問題。所以我不得不發帖。
謝謝閱讀！
編輯：忘記在帖子中添加，但 jquery 函式中的成功函式永遠不會被呼叫（通過一些測驗檢查）。此外，我對 jquery 非常陌生（目前在我的學習串列中）并且從另一個 stackoverflow 問題中獲得了該代碼，所以我不完全理解該語言。
uj5u.com熱心網友回復：
404 錯誤可能是由于您的$.ajax()呼叫使用了url指向目錄 ( "../assets/images/General") 的選項，而不是回傳回應的檔案或服務。這也將阻止success回呼被呼叫。
我懷疑這是在本地作業，因為您的本地服務器啟用了目錄索引。這意味著對檔案夾路徑的請求會回傳指向其內容的鏈接串列作為回應。Github Pages 沒有以這種方式配置并且不回傳目錄索引，因此使用這種方法讀取檔案夾內容將不起作用。有關在 Github Pages 中生成檔案夾內容串列的替代方法的更多討論，請參閱此問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/497895.html
標籤：javascript html jQuery 网页服务 github页面
上一篇：如何讓內容顯示在其他選單選項中？