I am currently making a game with HTML, and I set up a temporary page to test if something works. I am trying to have some SVG files from a folder put on my HTML site by putting in JavaScript:
<!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>
As you can see I want to list them all on the page. It did manage to enter the items folder and see all the items in it, but it couldn’t load them. It said
Failed to load resource: the server responded with a status of 404
Here are the items in my folder and the system accessing them but not loading the images:
