生成目录图片HTML页面失败：仅显示标题无图片加载

问题原因 #

你用的这段代码依赖浏览器返回目录文件列表，但直接通过file://协议打开HTML时，浏览器出于安全限制，不会允许脚本获取本地目录的文件列表，所以XHR请求拿不到图片链接，页面只显示标题。

方案一：用本地HTTP服务器让原代码生效 #

这是最直接让你现有代码跑起来的方法：

• 确保电脑安装了Python（Windows用户可从官网下载安装）
• 打开命令提示符，切换到HTML文件所在的文件夹（比如输入cd D:\存放HTML和images的文件夹）
• 运行对应命令启动服务器：
  • Python 3版本：python -m http.server 8000
  • Python 2版本：python -m SimpleHTTPServer 8000
• 打开浏览器访问http://localhost:8000/你的HTML文件名.html，此时原代码就能正常获取images目录的图片并显示。

方案二：静态生成HTML（无需服务器，直接打开） #

如果不想用服务器，直接生成包含所有图片路径的静态HTML：

方法1：Windows批处理自动生成 #

创建一个名为生成图片页面.bat的文件，粘贴以下内容：

@echo off
setlocal enabledelayedexpansion
echo ^<html^> > image_gallery.html
echo ^<head^> >> image_gallery.html
echo     ^<style^> >> image_gallery.html
echo         img { width: 300px; height: 200px; margin: 10px; } >> image_gallery.html
echo     ^</style^> >> image_gallery.html
echo ^</head^> >> image_gallery.html
echo ^<body^> >> image_gallery.html
echo     ^<h1^>Images in Directory^</h1^> >> image_gallery.html
echo     ^<div id="container"^> >> image_gallery.html

for %%f in (images\*.jpg images\*.png images\*.gif) do (
    echo         ^<img src="%%f"^> >> image_gallery.html
)

echo     ^</div^> >> image_gallery.html
echo ^</body^> >> image_gallery.html
echo ^</html^> >> image_gallery.html
echo 生成完成！
pause

把这个bat文件放在和images文件夹同级的目录，双击运行，会自动生成image_gallery.html，直接打开就能看到所有图片。

方法2：手动编写HTML #

如果图片数量不多，直接手动添加图片的相对路径：

<html>
<head>
    <style>
        img {
            width: 300px;
            height: 200px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <h1>Images in Directory</h1>
    <div id="container">
        <img src="images/photo1.jpg">
        <img src="images/photo2.png">
        <!-- 依次添加所有图片的路径 -->
    </div>
</body>
</html>

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