时间戳

首页 > 解决方案 > 客户端请求访问时，浏览器上未显示 Img 标签

javascript - 客户端请求访问时，浏览器上未显示 Img 标签

问题描述

晚上，这里是初学者。

我想制作一个仅在 html 文件的 head 标签上显示图像的本地静态网站，负责向客户端发送响应的节点似乎工作正常，但问题是客户端永远不会显示图像在浏览器上，而是在 alt 属性中获取文本内容。

这是处理请求和发送响应的 js 文件：

const {createServer} = require("http");
const {readFile} = require("fs").promises;
let server = createServer((request, response) => {
  response.writeHead(200, {"Content-Type": "text/html"});
  readFile("./home.html").then(file => response.end(file.toString()));
});
server.listen(8000);
console.log("Listening! (port 8000)");

这是作为响应发送的 html：

<html>
    <head><img src="img/testimg.jpg" alt="Test image" /></head>
</html>

我不知道问题是在服务器上还是在 html 文件上，因为服务器发送文件但是当我在浏览器中转到http://localhost:8000/时只显示 alt 属性，我相信它可能是我链接图像文件的方式有问题，因为当我从互联网链接图像时，它可以很好地显示该图像，我尝试将其更改为“./img/testimg.jpg”但它没有解决问题任何一个。

标签： javascripthtmlnode.js

解决方案

您总是在发送home.html文件。

当您打开页面时，您的浏览器尝试打开http://localhost:8000/img/testimg.jpg但这只是createServer再次调用里面的函数，您最终会发送home.html.

您可以尝试在函数中放置一些逻辑来区分这两个 url，或者使用更完整的解决方案（看一下express.js）来代替。

PS“非元标签”应该在<body>标签下，而不是<head>

推荐阅读