结论：试着让网页抓取电脑资料夹的图片，成、功、了！20250210更：追加编辑程式码按储存后，网页可以自动重新整理（真的好方便啊

又问了几次chatGPT，发现都会有CORS问题，被建议不要用Live Server而是用Express，让html和api都在同一个伺服器上，不会有跨来源问题。但现实是我还不知道Express是什么…原来它也是伺服器，并借由安装nodemon让它自动侦测档案变更并重启。

npm install express //先安装express

npm install -g nodemon //安装

nodemon server.js //再启动Express

接下来我又有个朴素的疑问，就是该怎么看到页面（之前只知道按VScode右下角Go Live的按钮）向chatGPT发问后，他说可以直接在浏览器输入localhost网址，后面看是使用哪个port

http://localhost:3000 //举例

顺利在chrome打开预览页面后，按下F12看一下，果然console又有错误讯息：前者似乎是因为执行的程式没有放到正确的地方，导致浏览器找不到它，因此重新改了loadImages.js放的位置

Failed to load resource: the server responded with a status of 404 (Not Found)
Refused to execute script from \'http://localhost:3000/loadImages.js\' because its MIME type (\'text/html\') is not executable, and strict MIME type checking is enabled.

后者从之前的经验知道可以先放着不管

Unchecked runtime.lastError: The message port closed before a response was received.

最后执行的是以下三个档案：

.html

<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
}
</style>
<script src="http://localhost:35729/livereload.js"></script>
<!--注意，livereload预设在port 35729跑，不用修改:D-->
</head>
<body>
<h1>Portfolio</h1>
<div class="gallery" id="gallery"></div>
<div id="imageContainer"></div>
<!--这行要under标题，才能显示在标题下方 -->
<script src="/loadImages.js"></script>

</body>
</html>

loadImages.js

async function loadImages() {
const imageContainer = document.getElementById("imageContainer");

try {
const response = await fetch("http://localhost:3000/api/images"); // 取得后端 API 回传的图片列表
const imageList = await response.json();

imageList.forEach(imageName => {
const img = document.createElement("img");
img.src = `http://localhost:3000/images/${imageName}`; // <-- 这里要对应伺服器开放的 `/images/`
img.alt = imageName;
img.style.width = "150px";
img.style.height = "150px";
img.style.objectFit = "cover";
imageContainer.appendChild(img);
});
} catch (error) {
console.error("无法获取图片：", error);
}
}
loadImages();

server.js

const express = require("express");

const livereload = require(\'livereload\');
const connectLivereload = require(\'connect-livereload\');

const app = express();
const path = require("path");
const fs = require("fs");

// 启动 livereload 监听 public 目录变化
const liveReloadServer = livereload.createServer();
liveReloadServer.watch(__dirname + "/public");

// 让 Express 使用 livereload
app.use(connectLivereload());

app.use(express.static("public")); // 让 Express 直接提供 public 资料夹内的静态档案

// 监听 livereload 变化
liveReloadServer.server.once("connection", () => {
setTimeout(() => {
liveReloadServer.refresh("/");
}, 100);
});

app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, "public", "index.html"));
});

app.get("/api/images", (req, res) => {
const imagesDir = path.join(__dirname, "public", "images"); // 你的图片资料夹
fs.readdir(imagesDir, (err, files) => {
if (err) {
return res.status(500).json({ error: "无法读取资料夹" });
}
res.json(files.filter(file => file.endsWith(".jpg") || file.endsWith(".png"))); // 只回传图片
});
});

app.listen(3000, () => {
console.log("Server running at http://localhost:3000");
});

然后就跑出来了。

现在遇到的问题，是目前图片的设置如大小及裁切只能写在loadImages.js里，照理说要写个css，但这就是明天努力的目标了。睡觉去！

虽然只是一小步，持续下去应该可以建出一个合意的作品集网站（舞