What could be causing the issue of not being able to load CSS files or images?

I'm currently in the process of learning how to develop websites, but I've encountered a stumbling block that I can't seem to overcome. I'm hoping someone here can help me out. I'm facing an issue where I am unable to link either a CSS file or an image for the site icon. However, if I use , it seems to work just fine. For my backend, I'm using Node.Js and for the frontend, I'm leveraging EJS.

Here's how I've been trying to connect images:

<!DOCTYPE html>
<html lang="eng">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="icon" type="image/png" sizes="32x32" href='src/images/favicon-32x32.png'>

    <title>Title</title>

And this is what I have for linking the CSS file:

<link rel="stylesheet" type="text/css" href="./style.css">

</head>
<body>

<h1 class="ws_title">Title</h1>

Both my css file and html template reside in the same directory: src/views/project The images are located under src/images

I've attempted using different browsers, but unfortunately, the issue persists.

Any ideas on what could be causing this problem?

Update: After some further investigation, I discovered that with EJS, I need to utilize express.static. Could someone provide guidance on how to proceed with this?

htmlcssnode.jsexpressejs

Answer №1

I duplicated your project and implemented some modifications.

  1. Change the name of images folder to public folder.
  2. Transfer style.css file from /views/pocketsage/ to public directory.
  3. Incorporate in server.js file Serving static files, with this line of code 
    app.use("/", express.static(path.join(__dirname, "public")));
  4. In server.js add path, 
    const path = require("path");
  5. In main.ejs modify href to 
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
  6. In main.ejs alter src 
    <img src="avatar.png" alt="" class="info-card__photo" />
  7. Restart the Server and browser ctrl+f5 and there you go.

Folder and file server.js and main.ejs code snippets and result in terminal of VScode:

https://i.sstatic.net/mgGby.png

Result in browser

and console display with AVATAR and FAVICON: https://i.sstatic.net/3Ld8F.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason behind session id and data persisting when setting the cookie.secure to True in an express session?

Currently, I am diving into the world of the MERN stack and embarking on a small project that requires me to manage some session data that needs to persist between different routes. Everything seems to be working fine as intended. However, whenever I navi ...

node.jsexpresssessioncookies

Which tag should I use, <b> or <mark>, to emphasize important marketing terms within a paragraph?

Trying to emphasize specific keywords in a paragraph of text can be challenging. I'm currently puzzled about the distinction between the <b> and <mark> tags. These words are highlighted because they play a crucial role in marketing, prompt ...

html

Sending chosen choice to controller method

I'm working with a table that contains inputs and angular models. <td> <select class="form-control" id=""> <option ng-model="mfrNo" ng-repe ...

javascriptangularjshtml

What are the best ways to utilize dynamic CSS on a smartphone browser for optimal performance?

Struggling to optimize my web application for mobile devices, I've encountered challenges with consistent display across different browsers. My idea is to utilize device capability detection to adjust widths and font sizes dynamically based on screen ...

asp.netiphonecssblackberrymobile

Avoiding Navbar Link Clicks due to Z-Index

Is it possible for the z-index or positioning of an element to hinder a user from clicking on a navbar link? When I visit my website , I find that I am unable to click on any of the links in the navigation bar. Could this be due to the z-index or position ...

jqueryhtmlcsscss-positionz-index

Extracting JSON data in PHP and presenting it in a tabular format

Below is a snippet of my HTML code, <html> <head> <script src="js/jquery.js"></script> </head> <body> <input type="text" name="query" id="queryBox"> <button id="load_basic" value = "button">search</but ...

phphtmljson

What are the best practices for storing an array of objects in MongoDB with Mongoose?

For my project, I needed to store data in a mongoDB document as an array of objects using Javascript, Node JS, Express framework, and Mongoose library. After researching online, I found two different methods to achieve this: Creating another sub-schema ...

javascriptnode.jsmongodbexpressmongoose

Is there a way for me to manage the appearance of the printed document's layout?

I have successfully added 3 print buttons to my website, each one designed to print a specific portion (div) of the webpage. Here is the code snippet for this functionality: function printPage(id) { var html="<html>"; //html+="<link rel="st ...

javascriptcss

Reorganize div elements responsively using Bootstrap 5.0

Struggling with web design using HTML, CSS, and Bootstrap v5.0, I am facing an issue. I have three divs A, B, and C that I want to reorder responsively as shown in the image below. A consists of a h2 and p tag, B includes two buttons, and C displays an ima ...

htmlcssbootstrap-5

Changing the width of the file input using css

Clicking just below the word demonstration also triggers a click on the input type file. How can this be avoided so that the click event only fires in the intended area regardless of size? <!DOCTYPE html> <html> <body> <style> in ...

javascriptjqueryhtmlcss

Creating an Angular application with the help of Express generator

I recently set up a project using express generator and installed bower to incorporate bootstrap and angular. My focus is on utilizing express for REST web services and setting up angular routes. While I can access my index page, there seems to be an issue ...

angularjsexpress

How can user input be captured in the terminal following the execution of npm start?

Imagine a basic program running in the background. Here is a simple simulation (index.js). process.stdin.resume(); console.log('just hanging...') If you run it with node index.js, nothing else will happen until you exit with ctrl+c. Even though ...

node.jsnpmterminal

Could someone provide a detailed explanation on the functionality of multiple inline nth-child() in CSS?

In this scenario, there is an example provided: html>body>#wrapper>div>div>div:nth-child(1)>div:nth-child(1)>nav { I am curious about the functionality of this code. Could someone dissect each div, ">", and nth-child()? Your ins ...

htmlcss

Encountering Errors in Compilation Post Addition of AWS Import in Angular 9 with Node.js and AWS Integration

I've scoured the internet for solutions to this problem but haven't had any luck. This is my first time posting on StackOverflow, so apologies if I'm not following all the guidelines. ERROR : node_modules/aws-sdk/clients/dynamodbstreams. ...

node.jsangularjsamazon-s3aws-sdk-js

Leveraging Modernizr for identifying drag and drop functionalities

On my website, there is a section that requires drag and drop functionality in HTML5. I want to inform users on the homepage if their browser supports this feature. Despite attempting to use Modernizr, I have not been successful. I generated a custom file ...

html

Managing multiple requests at the same time in Express on a local server using Arduino

My goal is to set up a local webserver on my Windows PC for my Arduino to send POST requests to. These requests are then meant to be written to Cloud Firestore through the local webserver since the Arduino lacks support for HTTPS, which is necessary for Fi ...

node.jsfirebaseexpress

Tips for clearing state when simply refreshing a DataTable on the page

When it comes to a datatable on a page, I am facing a unique challenge. I want the datatable to be refreshed with a clear state (no column order, etc.), but if the page is accessed by pressing the back button, it should retain its state. I have experiment ...

javascripthtmldatatablebootstrap-4callback

align text vertically over an image

I've come across this question many times, but none of the answers seem to solve my issue. My challenge is centered around aligning text on an image with regards to vertical positioning. Below is the code I'm working with: <div class="col-sm- ...

htmlcssvertical-alignment

How to toggle between two background colors in a webpage with the click of a button using JavaScript

I need help with a unique website feature. I want to implement a button that cycles between two different background colors (white and black) as well as changes the font color from black to white, and vice versa. My goal is to create a negative version of ...

javascripthtmlcsscolorsbackground

Mapping with Star Components

As a newcomer to ReactJs, my task is to create a 5-star review component with the ability to display half-star ratings. I previously implemented this in Angular5. Within the map method, I need to loop through the following elements: <!-- full star -- ...

cssreactjs