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:

Result in browser

and console display with AVATAR and FAVICON:

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

Present Images and Text Alongside Each Other in a Grid Layout

My goal is to have an image and text displayed side by side, but for some reason they are appearing stacked on top of each other. https://i.stack.imgur.com/F8OXL.png If you want to take a look at the code I am using, here is the link to my CodePen: https: ...

htmlcss

Using jQuery to enable scrolling and dynamically changing classes

I'm currently working on enhancing my website with a feature that changes the opacity of the first section to 0.4 when a user scrolls more than 400 pixels down the page. I attempted the following code without success: if($("html, body").offset().top ...

javascriptjquerycssscroll

Do I require two bot logins for discord.js?

Working on my discord bot, I've been trying to incorporate a script from index.js. Should I also include bot.login at the end of cmdFunctions.js? Here is the content of index.js: const Discord = require('discord.js'); const bot = new Discor ...

javascriptnode.jsdiscorddiscord.js

What are the steps for launching a Yeoman Angular-Fullstack project?

I'm looking to launch a basic Angular project created with the angular fullstack framework. https://github.com/DaftMonk/generator-angular-fullstack I've attempted: yo angular-fullstack test grunt build After this, I ended up with 2 folders i ...

angularjsnode.jsnginxyeomanyo

Why is it that my React app is on a different port than the Express server that it listens to?

As I'm working on my React app, it currently runs on the default port http://localhost:3000/. However, when I need to communicate data from the client to the server, I have to listen on a different port. Take a look at the below code snippet: const ex ...

javascriptnode.jsexpressport

A list containing various checkboxes

I have created a list with checkboxes in each item. I want to ensure that if any of the child checkboxes are checked, the parent checkbox is also automatically checked. Here's the HTML code: <input type="checkbox" id="parent"> <ul> ...

jqueryhtml

What is the best way to retrieve a value from a basic jsdom function?

Working with jsdom and jQuery has been smooth sailing for me so far. However, in an effort to avoid repetitive code, I decided to create a function that takes HTML input, uses jQuery to manipulate it, and returns the modified result. Unfortunately, I ran i ...

node.jsexpressjsdom

Creating a text file while in a suspended state within the event handler on Windows 8 using HTML5

When the suspend event is triggered inside the winjs.application.oncheckpoint event handler, I am attempting to write a text file. The content of the file is my object in JSON format. Below is the code snippet: applicationData.localFolder.createFileAsync( ...

javascripthtmlwindows-8winjsfilewriter

How to prompt the browser to download a file with a specific name using node.js and express

I've created a node/express website as part of my university project. It allows users to search for a specific law ID, which then displays a table with various files in different formats and languages related to that ID. I am using the "http-proxy" mo ...

javascriptnode.jsexpressdownloadproxy

Creating a detailed Prisma Schema based on JSON data may seem like a daunting task at first

My familiarity with Prisma ORM is limited, and while tutorials cover the basics of models and relations, my specific scenario requires converting the following JSON into a Prisma model. Imagine this as an Item model with relationships to options and addit ...

node.jsexpressormprisma

Is there a possible solution to overcome the type error when utilizing dynamic environment variables in conjunction with TypeORM and TypeScripts?

I'm currently working on a backend project using the TsED framework, which leverages TypeScript and ExpressJS. To work with TypeORM, I have also integrated the dot-env package in order to utilize custom environment variables sourced from a .env file ...

typescriptexpresstypeorm

The object literal can only define properties that are already known, and 'data' is not found in the type 'PromiseLike<T>'

When making a request to a server with my method, the data returned can vary in shape based on the URL. Previously, I would cast the expected interface into the returned object like this: const data = Promise.resolve(makeSignedRequest(requestParamete ...

node.jstypescript

Utilizing the import feature for structuring the routes folder in Express with Node.js

Recently, I made the switch to using ECMAScript (ES6) for my NodeJS Rest API with Express, and I've encountered a few challenges when working with the new keyword import In the past, I would organize my routes folder like this: Let's imagine th ...

javascriptnode.jsexpressecmascript-6

Javascript code that enables me to specify the type of weather

My intention with this code was to create unique characteristics for different weather types and randomly select one by generating a random number. I defined 11 different weather types as objects of the Weather class. I then implemented a getWeather funct ...

javascripthtml

Achieving overlapping of a <div> element with a "position: fixed" container while enabling vertical scrolling of the fixed container's content

In my single page application, I have a fixed container and I am trying to make one div inside this container overlap the boundaries of the fixed container while also vertically scrolling with its contents. Unfortunately, I have only been able to achieve e ...

cssoverflowcss-position

JavaScript confirmation for PHP delete button

Is there a way to implement a JavaScript alert that prompts the user to confirm their action when they click the delete button? I attempted to integrate a class into an alert box: <?php //$con = mysqli_connect("localhost", "root", "root", "db"); $sql ...

javascriptphphtmlalert

Using Styled Components to achieve full width for input tag in relation to its parent

I am working with an input field that has a specific width set. My goal is to increase the width of this input field to 100% by selecting it from its parent component. Is there a way to achieve this without passing an explicit width prop in the styled c ...

javascripthtmlcssreactjsstyled-components

Unable to attach a tooltip to a list item

As an Angular developer, I am working on a list element that displays all the cars and I am looking to add a tooltip to enhance its visual appeal. Here is what I have attempted so far: I created a span tag with the class "tooltip" to wrap around the ul el ...

htmlcssangular

Tips for switching a group of buttons within a userscript by clicking a single button?

Apologies if my wording is not clear, allow me to clarify. I am in the process of developing a userscript that will display a set of buttons below a main button when clicked. These additional buttons will serve different functions and should disappear whe ...

javascripthtmljquerycssuserscripts

The entire framework remains concealed as the anchor component becomes immeasurable

Within a fixed-width paragraph, I have an anchor tag. The CSS for the p tag includes the properties text-overflow: ellipsis and overflow:hidden. However, when the anchor tag's content overflows (e.g., it contains a long string), the right outline is n ...

htmlcss