0

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. I wrote the website with 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. It shows the name of the file but doesn't display it. I put the image in the same folder as the html file.

here is the html code that i have made: 

<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.
Andrei Fiordean
  • 223
  • 3
  • 14
JonathanSchieren
  • 1
  • because you'd *probably* didn't serve the *image*. Here's how to do it https://stackoverflow.com/questions/5823722/how-to-serve-an-image-using-nodejs – 1565986223 Apr 02 '19 at 14:32

1 Answers1

0

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

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)

Now node will serve static files from the above mentioned directory whenever such a URL is accessed, eg.

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

Just put the appropriate URL in the src of on your front-end, like so :

rename your index.html to index.ejs

in your app.js 

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

and finally do run npm install

and paste your image like this:

<img src="public/imgs/Winkraftanlage.png" alt="Windkraftanlage"">
Muhammad Ali
  • 369
  • 7
  • 23