我目前正在使用 HTML 制作游戏，我设置了一个临时页面来测试某些功能是否有效。我试图通过输入 JavaScript 将文件夹中的一些 SVG 文件放在我的 HTML 网站上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Gallery</title>
</head>
<body>
<h1>SVG Gallery</h1>
<div id="svg-container"></div>
<script>
async function fetchSVGs() {
try {
const response = await fetch('/assets/svg/props/items');
const text = await response.text();
// This will parse the directory listing to extract SVG file names.
const parser = new DOMParser();
const doc = parser.parseFromString(text, 'text/html');
const links = Array.from(doc.querySelectorAll('a'))
.filter(link => link.href.endsWith('.svg'));
// Load each SVG file dynamically
const container = document.getElementById('svg-container');
links.forEach(link => {
const svgPath = link.getAttribute('href');
const img = document.createElement('img');
img.src = svgPath;
container.appendChild(img);
});
} catch (error) {
console.error('Error loading SVGs:', error);
}
}
fetchSVGs();
</script>
</body>
</html>
如您所见，我想将它们全部列出在页面上。它确实设法进入项目文件夹并查看其中的所有项目，但无法加载它们。上面说
Failed to load resource: the server responded with a status of 404以下是我的文件夹中的项目以及访问它们但未加载图像的系统：
404错误通常发生在文件路径错误时。请检查您的文件是否正确。如果您的 HTML 文件位于根目录中，请确保
assets/svg/props/items如果您有已知的 SVG 文件名列表，则可以使用 JavaScript 为每个文件动态添加元素。
<script>
// List of SVG filenames
const svgFiles = ['image1.svg', 'image2.svg', 'image3.svg'];
const folderPath = '/assets/svg/props/items/';
const container = document.getElementById('svg-container');
svgFiles.forEach(file => {
const img = document.createElement('img');
img.src = folderPath + file;
img.alt = file; // Optional alt attribute for accessibility
container.appendChild(img);
});
</script>