Node.js服务器上的HTML网站不显示图像

Question

So I'm quite new to this but I think this should be possible to solve. 所以我对此很新，但我认为应该可以解决这个问题。

I use a Raspberry Pi 3 and Node.js to create a website to control the GPIO's. 我使用Raspberry Pi 3和Node.js来创建一个控制GPIO的网站。 I wrote the website with HTML. 我用HTML写了这个网站。

Now I want an image as background behind the switches on the website. 现在我想要一个图像作为网站上的开关背后的背景。 If I link an images via url (for example a picture from google) it's no problem. 如果我通过网址链接图像（例如谷歌的图片），这没问题。

But if I link a picture that is on the Pi, it won`t show on the Website. 但如果我链接Pi上的图片，它就不会在网站上显示。 It shows the name of the file but doesn't display it. 它显示文件的名称但不显示它。 I put the image in the same folder as the html file. 我把图像放在与html文件相同的文件夹中。

here is the html code that i have made: 这是我做的html代码：

<html>
<head>
<body>

<h1>Control LED light</h1>

<img src="Winkraftanlage.png" alt="Windkraftanlage">
</body>
</head>

<body>
<input id="light" type="checkbox">LED
</body>

```</html>


Thanks a lot in advance.

Answer 1

why don't you use express to handle all your static files and use ejs template for handling frontend Import express.js into your app.js 为什么不使用express来处理所有静态文件并使用ejs模板处理前端import express.js到你的app.js

var express = require('express');
var app = express();
Now let node know the path of the public folder :
var publicDir = require('path').join(__dirname,'/public');
app.use(express.static(publicDir));

__dirname gives you the current directory (in this case the root directory in which app.js resides for me) __dirname为您提供当前目录（在本例中为app.js所在的根目录）

Now node will serve static files from the above mentioned directory whenever such a URL is accessed, eg. 现在，每当访问这样的URL时，节点将提供来自上述目录的静态文件，例如。

http://localhost/myapp/public/imgs/myImage.jpg

Just put the appropriate URL in the src of on your front-end, like so : 只需将适当的URL放在前端的src中，如下所示：

rename your index.html to index.ejs 将index.html重命名为index.ejs

in your app.js 在你的app.js

app.set('view engine', 'ejs');

and finally do run npm install 最后运行npm install

and paste your image like this: 并粘贴你的图像：

<img src="public/imgs/Winkraftanlage.png" alt="Windkraftanlage"">

Node.js服务器上的HTML网站不显示图像

问题描述

1 个解决方案

解决方案1
0 2019-04-02 08:10:37

Node.js服务器上的HTML网站不显示图像

问题描述

1 个解决方案

解决方案1 0 2019-04-02 08:10:37

解决方案1
0 2019-04-02 08:10:37