Upon opening the html file by directly clicking on it, the background-image styled with url() functions correctly. However, when I open this file within an express app using res.sendFile(), the background-image fails to display. Interestingly, all other CSS code works properly in both scenarios, as does the HTML code. It seems that the issue lies specifically with the background-image not functioning within the express app. I am unsure if there is a solution to this problem or if I may be overlooking something. I even attempted placing the image in an ejs file used within the app, but encountered the same issue where only the rest of the CSS code displayed.
I apologize for not being able to include images in my query, as I intended to showcase the directory structure of the express app along with the path to the image. To provide context, both the home.html file and the app.js file reside within the express app folder, while the image itself is located in the "/public/images" path (inside the express app). This follows the standard convention for organizing files within an express app.
Despite trying various methods such as absolute paths starting with '/' and the current path, I have yet to find a working solution. Researching online did not yield any relevant results indicating that others faced a similar issue (as background-images typically function without trouble) which leads me to question whether I am overlooking something crucial.
//home.html
//This snippet represents the head section of the HTML file,
//with a focus on the problematic background-image: url()
//style when accessed through Express
<head>
<style>
body {
text-align: center;
background-image: url("./public/images/aghhome.jpg");
background-color: white;
background-repeat: no-repeat;
font-family: "Times New Roman", Times, serif;
}
h1 {
font-size: 50px;
border-style: solid;
background-color: black;
color: white;
}
button {
font-size: 50px;
}
</style>
</head>
//app.js
//Main JavaScript file for the express app
//Snippet depicting how the file is opened using sendFile()
app.get('/',function(req,res){
res.sendFile(path.join(__dirname+'/home.html'));
});
The expected outcome is for the background image to display when accessing the application through the express app, not solely when opening the HTML file directly from the filesystem.