似乎无法在 node.js 服务器上看到图像

Question

服务器在 localhost:300 上运行时的情况：

HTML 本身的样子：

我对此很陌生，正在尝试制作一个视频游戏网站供人们购买东西。我想要游戏的图片，这样可以使网页看起来更好，但我似乎无法在服务器上看到图片。当在 chrome 中打开时，我可以在 HTML 文件中看到它们，但在本地主机上看不到。我对此做了很多研究，但似乎无法弄清楚。我是否有机会获得一些帮助来让图像显示在服务器上？

HTML代码

<!DOCTYPE HTML>


<HTML>

 <style type="text/css">

/* start of nav css*/
*{
margin: 0;
padding: 0;
}

h1 {
text-align: center;
color: #f00253;
padding: 20px;
}

.nav{
list-style-type: none;
display: -webkit-inline-flex;
background-color: #3f3d3d;
padding-left: 25%;
margin: 0;
width: 100%;
}

.nav li a {
color: white;
font-size: 18px;
padding: 20px 70px;
display: block;
text-decoration: none;
}

.nav li a:hover {
background-color: #f00253;
}

/* finish of nav css*/


</style>

<head>
<title>Jonathan's Database Game Store</title>
<link rel="stylesheet" type="text/css" href="nav.css">
</head>

<body>
<h1>Jonathan's Database Game Store</h1>

<ul class="nav">
    <li><a href="#">Login</a></li>
    <li><a href="#">PC Games</a></li>
    <li><a href="#">Xbox Games</a></li>
    <li><a href="#">Playstation Gmaes</a></li>
</ul>


<div class="left"> 
    <h2>Raingbow Six Seige</h2>
    <img src="r6.webp">

    

</div>


</body>
</html>

server.js代码

const http = require('http')
const fs = require('fs')
const port = 3000

const server = http.createServer(function(req, res) {
res.writeHead(200, {'Content-Type': 'text/html'})
fs.readFile('home.html', function(error, data) {
    if (error) {
        res.writeHead(404)
        res.write('Error: File Not Found')
    } else {
        res.write(data)
    }
    res.end()
 })
 
})

server.listen(port, function(error){
if (error) {
    console.log('something went wrong', error)
} else {
    console.log('server is listening on port ' + port)
}

})

Answer 1

问题

使用 NodeJS 的 HTTP 模块制作 HTTP 服务器非常乏味，问题是您没有在 HTTP 服务器上托管图像。

修复

我建议您使用 Express，这会让一切变得更简单。

在控制台中使用 npm i express 安装它，然后您可以将此代码用于您的 HTTP 服务器

const express = require("express")
const app = express()

const server = app.listen(3000, () => { // create a HTTP server on port 3000
    console.log(`Express running → PORT ${server.address().port}`)
});

app.use(express.static(__dirname, { // host the whole directory
        extensions: ["html", "htm", "gif", "png"],
    }))

app.get("/", (req, res) => {
    return res.sendFile("./PC.html")
})

app.get("*", (req, res) => {
    return res.sendStatus(404)
})

Answer 2

我弄明白为什么蘑菇白痴之前的代码不起作用了。在以下代码 res.sendFile(__dirname + "/PC.html") 中缺少 __dirname +。这是与 HTML 和图像一起使用的最终代码。

const express = require("express")
const app = express()

const server = app.listen(3000, () => { // create a HTTP server on 
port 3000
console.log(`Express running → PORT ${server.address().port}`)
});

app.use(express.static(__dirname, { // host the whole directory
    extensions: ["html", "htm", "gif", "png"],
}))

app.get("/", (req, res) => {
res.sendFile(__dirname + "/PC.html")
})

app.get("*", (req, res) => {
return res.sendStatus(404)
})

似乎无法在 node.js 服务器上看到图像

cant seem to see images on node.js server

image

node.js

问题

修复