本地网页加载GeoTIFF文件遇Request failed错误，求排查方案

我用Leaflet和GeoTIFF.js开发本地网页时，遇到GeoTIFF文件加载失败的问题，报错信息为‘Request failed’。已经参照各类教程操作，但问题始终存在。

我的环境配置：

• 用EasyPHP搭建本地服务器
• GeoTIFF文件与HTML文件存放在同一目录
• 反复核对过文件路径，确认GeoTIFF的URL正确
• 已验证可以通过浏览器直接打开该GeoTIFF文件

虽然做了以上检查，还是出现这个错误。我尝试排查服务器配置、文件权限以及服务器日志，但没能定位问题根源。

我的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GeoTIFF Viewer</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        #map-container {
            height: 500px;
        }
        #navigation-controls {
            margin-top: 10px;
        }
        button {
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div id="map-container"></div>
    <div id="navigation-controls">
        <button id="zoom-in">Zoom In</button>
        <button id="zoom-out">Zoom Out</button>
        <button id="move-left">Move Left</button>
        <button id="move-right">Move Right</button>
        <button id="move-up">Move Up</button>
        <button id="move-down">Move Down</button>
    </div>
    <script src="https://unpkg.com/leaflet/dist/leaflet.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/geotiff"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var map = L.map('map-container').setView([0, 0], 2);

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© OpenStreetMap contributors'
            }).addTo(map);

            // Load GeoTIFF file
            var url = 'd.tif'; 
            GeoTIFF.fromUrl(url)
            .then(function(tiff) {
                // Step 2: Extract image data
                var image = tiff.getImage();
                return image.readRasters();
            })
            .then(function(rasters) {
                // Step 3: Convert image data to suitable format
                var imageData = L.imageOverlay(rasters[0], [[-90, -180], [90, 180]]);

                // Step 4: Add image layer to the map
                imageData.addTo(map);
            })
            .catch(function(error) {
                // Handle error
                console.error('Error loading GeoTIFF:', error);
                alert('Failed to load GeoTIFF: ' + error.message);
            });

            // Event listeners for navigation controls
            document.getElementById('zoom-in').addEventListener('click', function() {
                map.zoomIn();
            });

            document.getElementById('zoom-out').addEventListener('click', function() {
                map.zoomOut();
            });

            document.getElementById('move-left').addEventListener('click', function() {
                map.panBy([-100, 0]);
            });

            document.getElementById('move-right').addEventListener('click', function() {
                map.panBy([100, 0]);
            });

            document.getElementById('move-up').addEventListener('click', function() {
                map.panBy([0, -100]);
            });

            document.getElementById('move-down').addEventListener('click', function() {
                map.panBy([0, 100]);
            });
        });
    </script>
</body>
</html>

恳请各位帮忙分析错误的可能原因并给出解决建议，任何思路或见解我都十分感激！

提前致谢！

内容的提问来源于stack exchange，提问作者Issa Nasralli