'How to display image in buttons in HTML

Hi I am currently developing a local web server to control things in my car with a RPi 4. I am using nodejs npm express ejs and rpi-gpio libraries.

I want to use the pgio to power relays to control things like lights, led bar, heater, ect so I created buttons but I would like to use images as buttons instead of text and when I try to change the src the IDE CAN find the image and show it to me but when I check on the browser it cant find it

If you also have suggestion to simplify my code I am all ears

The paths looks like this

/Projects/dbDash/package.json
/Projects/dbDash/server.js
/Projects/dbDash/public/200x200/theImage.png
/Projects/dbDash/views/index.ejs

server.js

const express = require('express')
const app = express()
var path = require('path');
var gpio = require('rpi-gpio');

app.set('view engine', 'ejs')
app.use(express.static(path.join(__dirname, 'public')));
console.log(path.join(__dirname, 'public'));
app.get('/', function(req, res){
    res.render('index',{status:"Press Button To change Status of Relay."});
});
app.listen(3000, function () {
    console.log('Server Started on Port: 3000!')
})
app.post('/relay1/change', function(req, res){
    gpio.read(7, function(err, theValue) {
        if (err) throw err;
        gpio.write(7, !theValue)
        console.log("Written " + (!theValue?"true":"false") + " to pin 7");
        return res.render('index', {status: (!theValue?"ON":"OFF")});
    });
})

index.ejs

<div class="BorderMargin">
    <form action="/relay1/change" method="post">
        <button type="submit" class="button"><img src="../public/200x200/hazard.png" height="200" width="200"/></button>
        <button type="submit" formmethod="post" formaction="/relay2/change" class="button"><img src="../public/200x200/hazard.png" height="200" width="200"/></button>
        <button type="submit" formmethod="post" formaction="/relay3/change" class="button"><img src="../public/200x200/hazard.png" height="200" width="200"/></button>
    </form>
    <form action="/relay4/change" method="post">
        <button type="submit" class="button"><img src="../public/200x200/hazard.png" height="200" width="200"/></button>
    </form>
    <a>Relay Status: <%=status %></a>
</div>

Code Inspector

GET http://localhost:3000/public/200x200/hazard.png 404 (Not Found)
javascripthtmlnode.jsexpressdashboard


Solution 1:[1]

I don't think that a button tag can display an image.. but what you can do is make a div and place your image tags inside of it and style accordingly.

Then just set an onClick property to the div and it will perform the actions you want

Solution 2:[2]

If you're really needing a button just put the image inside the button... If you just do it the way Dr. Bright says that works fine too.

Solution 3:[3]

all I need to do is to add this line in server.js

app.use('/public', express.static(process.cwd() + '/public'))

thanks to @YasirPoongadan comment then all the buttons show a picture

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dr. Bright
Solution 2 Cody B.
Solution 3 Grez

Related Questions