I would like to use a local image file as the background on my browser page. When I run my index.html file from Windows file explorer, it displays no problem. But when I run my app index.js file at node.js terminal and go to localhost:3000, it doesn't. I understand that for security reasons Chrome doesn't allow local files. Then it looks like I have to send the image file to the browser in a different way like uploading it or something. What code do I need to do this?
My index.js file is as follows:
/ This function displays the initial login form when 'Aidat takibi' button is clicked.
function openForm() {
document.getElementById("loginform").style.display = "block";
}
// This function closes the login form when the Kapat button is clicked.
function closeForm() {
document.getElementById("loginform").style.display = "none";
}
// Import or load node.js dependency modules.
var express = require("express");
var app = express();
var path = require("path");
var cors = require("cors");
var port = 3000;
//const static_path = join("..", "public"); // Setting path for public directory
//app.use(express.static(static_path));
app.use(express.urlencoded({ extended: true })); // to support URL-encoded bodies.
// Route for handling localhost.
app.get('/', function(req, res){
res.sendFile("D:/Behrans-files/Web-projects/havuzlusite/index.html");
});
app.use(cors());
//Route that handles login logic. This is where the user will send their login info.
//app.post('/havuzlusite_app.html', (req, res) =>{
// console.log(input_isim);
// console.log(input_sifre);
//})
/*$(document).ready(function () {
$(".btn-login").click("load", function () {
validateuser();
});
});*/
// Start your server on a specified port and listen for http request on that port.
app.listen(port, () => {
console.log(`server is running at http://127.0.0.1:8887`);
// This function validates user entered name and password against database.
function validateuser() {
var mysql = require('mysql');
var input_isim = document.getElementById("isim").value;
var input_sifre = document.getElementById("sifre").value;
var con = mysql.createConnection({ // Create connection object.
host: 'localhost',
user: 'root',
password: 'hsAdmin',
database: 'havuzsDB'
});
// Connect to havuzsDB database.
con.connect(function(err) {
if (err) throw err;
else
console.log("Connected!");
});
// Check if name and password inputs exist in database.
//router.get('/', function(req, res, next) {
//con.query('select * from havuzs_sakinleri where isim=[input_isim] && sifre=[input_sifre]',
// function(err,rows,fields) {
con.query(
'select * from havuzs_sakinleri where isim=[input_isim] && sifre=[input_sifre]',
function(err,results,fields) {
// If error in searching the database, display error message.
if (err)
// return callback(new Error ('Error while performing query'), null);
alert('Veri tabani aranirken sorun olustu.');
// If user entered name and password are not found in database, display a message.
if (rows.length !== 1)
// return callback(new Error ('Failed to find exactly one user'), null);
alert('Isim ve sifre veri tabaninda bulunamadi.');
// If user name and password match db, show user info from db.
//res.send(rows);
res.send(results);
//res.render("index", {"rows": rows});
//units = rows;
//app.get('/', function(req, res) {
// res.send(units); /// multiple results to the browser
//});
//alert('Isim: ${row.isim} Blok no: ${row.blokno} Daire no: ${row.daireno}');
//alert('Yil: ${row.yil} Toplam odenen: ${row.toplam_odenen_tl} Aidat bakiye: ${row.aidat_bakiye}');
connection.end(); // We are done with db connection, we can close it.
});
};My index.html code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" content="width=device-width, initial-scale=1">
<title>Havuzlu Site</title>
<style>
/* Use havuzlusite picture as full page background. */
html {
/* background-image: url("http://127.0.0.1:8887/havuzlusite-img.jpg"); */
/* background-image: url("havuzlusite_img.jpg"); works when index.html file is run */
background-image: url("/havuzlusite_img.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
h1 {
color: black;
text-align: center;
}
/* Set general style for the button class. */
.button {
border: none;
color: white;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
/* Create classes for login form buttons. */
.button1 {background-color: aqua; margin-left: 39%;}
.button2 {background-color: blue; margin: center;}
.button3 {background-color: blueviolet; margin-right: 39%;}
/* Create class for the initial login form - hidden by default */
.login-form {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 9;
}
.login-fields {
max-width: 300px;
padding: 10px;
background-color: white;
}
/* Set styling for the input fields of the login-form. */
.login-fields input[type=text], .login-fields input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}
/* Set additional styling When the input fileds get focus (when they are clicked). */
.login-fields input[type=text]:focus, .login-fields input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Set styling for the basic btn class. */
.login-fields .btn-login {
background-color: #04AA6D;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom:10px;
opacity: 0.8;
}
/* Add a red background color to the cancel button */
.login-fields .btn-cancel {
background-color: red;
}
/* Add some hover effects to buttons */
.login-fields .btn:hover, .open-button:hover {
opacity: 1;
}
</style>
</head>
<body>
<h1>Havuzlu siteye hoş geldiniz</h1>
<button class="button1">Site haberleri</button>
<button class="button2">Site yönetimi</button>
<button class="button3" onclick="openForm()">Aidat takibi</button>
<div class="login-form" id="loginform">
<form class="login-fields" action="http://localhost:3000/index" method="post">
<! Define the fields in the login form. >
<h1>Kullanıcı girişi</h1>
<label for="isim"><b>isim</b></label>
<input type="text" placeholder="İlk ve soy isim giriniz" id="isim" name="isim" required>
<label for="sifre"><b>şifre</b></label>
<input type="password" placeholder="Şifre giriniz" id="sifre" name="sifre" required>
<button type="submit" class="btn-login"> Giriş</button>
<! <button type="submit" class="btn-login" onclick="validateuser()"> Giriş</button> >
<button type="submit" class="btn-cancel" onclick="closeForm()"> Kapat</button>
</form>
</div>
<img src="D:/Behrans-files/Web-projects/havuzlusite/havuzlusite-img.jpg">
<! <script src="https://code.jquery.com/jquery-3.6.0.min.js" > >
<! integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" >
<! crossorigin="anonymous"> >
<!</script> >
<! <script src="havuzs_jquery.js"></script> >
<! <script src="bundle.js"></script> >
<! <script src="http://127.0.0.1:8887/require.js"></script> >
<script src="http://127.0.0.1:8887/index.js"></script>
</body>
</html>
index.jsfile. You can actually serve the image file to localhost:3000 from yourindex.jsfile but it will be complicated to show you if you don't provide any of your code.index.jshere. You can do that by editting the question.<script src="127.0.0.1:8887/index.js"></script>This is not making much sense, but I think you are getting there. Remember, Node js is server-side javascript, and everything referenced in html is running in the browser. The javascript you are running on the server cannot run in your browser. If you want to run javascript in the browser, you should host a separate javascript file on the server. Check out github.com/expressjs/express/tree/master/examples/static-files