引自免费微信小程序：皆我百晓生
看起来你在尝试创建一个本地服务器，并通过它来加载HTML页面中的CSS、JavaScript和图片资源。然而，图片资源没有正确加载。为了解决这个问题，我们需要检查几个方面：
- 图片文件路径是否正确。
- 服务器端处理请求的逻辑。
首先，确认你的图片文件（01.png 和 img.png）位于与HTML、CSS和JavaScript文件相同的目录下，或者在指定的相对路径内。从提供的代码来看，图片的引用是正确的，都是相对于HTML文件的相对路径。
接下来，让我们看看服务器端代码。这里有一个可能的问题：你正在将所有文件内容转换成字符串并返回，这适用于文本类型（如CSS和JS），但对于二进制数据（如图片）则不适用。你需要根据请求的文件类型发送相应的Content-Type响应头。
修改后的服务器端代码如下所示：
const http = require('http');
const url = require('url');
const fs = require('fs');
function sendFile(response, filePath, contentType) {
fs.readFile(filePath, (err, data) => {
if (err) {
console.error(err);
response.writeHead(500, { 'Content-Type': 'text/plain' });
response.end("An error occurred while loading the file.");
return;
}
response.writeHead(200, { 'Content-Type': contentType });
response.end(data);
});
}
const server = http.createServer((request, response) => {
const parsedUrl = url.parse(request.url);
const filename = `./${parsedUrl.pathname}`;
switch (parsedUrl.pathname.split('.')[-1]) {
case 'css':
sendFile(response, filename, 'text/css');
break;
case 'js':
sendFile(response, filename, 'application/javascript');
break;
case 'png':
case 'jpg':
case 'jpeg':
case 'gif':
case 'bmp':
sendFile(response, filename, 'image/' + parsedUrl.pathname.split('.')[-1]);
break;
default:
sendFile(response, filename, 'application/octet-stream');
}
});
server.listen(8050, () => {
console.log('服务已经启动');
});
这段代码会根据请求的文件扩展名设置正确的Content-Type响应头，确保浏览器能正确解析图片和其他类型的文件。现在，你应该能够在浏览器中正常加载图片了。如果你仍然遇到问题，请检查一下图片文件的实际位置以及确保服务器正在运行并且可以访问。
