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

发布于 2025-01-22 06:14:18 字数 2234 浏览 0 评论 0原文

当服务器在Localhost上运行时的外观：300：

net/4j8c5.jpg“ rel =“ nofollow noreferrer”>

我非常非常这是新的，并试图制作一个视频游戏网站，以供人们购买东西。我想拥有游戏的图片，以便它可以使网页看起来更好，但是我似乎看不到服务器上的图片。在Chrome打开时，我可以在HTML文件上看到它们，但不能在Localhost上看到它们。我对此做了很多研究，似乎无法弄清楚。我有机会能够获得能够在服务器上显示图像的帮助吗？

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>

服务器。

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)
}

})

原文

What it looks like when the server is running on localhost:300 :

What the HTML looks like itself:

I am very new to this and trying to make a video game website for people to purchase things. I wanted to have pictures of the game so that it can make the webpage look nicer but I can't seem to see the pictures on the server. I can see them on the HTML file when opened in chrome but not on localhost. I have done a lot of research on this and can't seem to figure it out. Is there any chance I can get some help on being able to get the images to show on the server?

HTML Code

<!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 Code

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)
}

})

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

聚集的泪 2025-01-29 06:14:18

使用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)
})

The problem

Using NodeJS' HTTP module to make a HTTP server is pretty tedious, what the problem is, is that you aren't hosting the images on your HTTP server.

The fix

I would recommend that you use Express which makes everything way easier.

Install it with npm i express in console then you can use this code for your HTTP server

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)
})

回复收藏 0 原文

难以启齿的温柔 2025-01-29 06:14:18

我已经弄清楚了为什么蘑菇白痴的先前代码不起作用。在以下代码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)
})

I have figured out why Mushroom idiot's previous code did not work. was missing the __dirname + in the following code res.sendFile(__dirname + "/PC.html"). Here is the final code that works with the HTML and images.

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)
})

回复收藏 0 原文

~没有更多了~