unable to display picture on puggy

Check out the code snippet below:

<!DOCTYPE html>
<html lang="en>
<head>
    <meta charset="UTF-8>
    <title>Home Page</title>
</head>
<body>
<img src="resources/mainlogo.png" style="width:304px;height:228px;">
<h1>Welcome to our user management application</h1>
<h3>Please see links below to navigate our homepage</h3>

<a href = /adduser>Create new user</a>
<a href = /users>List users</a>

</body>
</html>

Only the image is not being displayed.

Take a look at my file structure:

index.html
resources
  mainlogo.png

Any idea what I could be doing wrong?

Snippet of the rendering code:

app.get('/', function (req, res) {

    // render main page
    res.sendFile(__dirname + "/index.html");


});

Here is the error message from the console:

Error http://localhost:8000/resources/mainlogo.png 404 (Not Found)

The image is located inside the resources folder despite the error.

Answer №1

To ensure that the resources folder is reachable via express.static, you must include the following code:

app.use(express.static('resources')); // With this line, express can access files in the folder

In your html code:

...
<img src="mainlogo.png" style="width:304px;height:228px;">
...

Answer №2

implementing the following

app.use(express.static('assets'))

and modifying this

<img src="newlogo.png" style="width:304px;height:228px;">

made a significant difference

Answer №3

To serve static files such as images and CSS files, it is necessary to utilize the middleware express.static.

In your situation, the following code should be effective:

app.use(express.static('resources'));

Refer to the static files documentation on how to display static files

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

Nuxt Js - Ensuring script is only loaded once during the initial page load

I already have a static website design, but now I'm converting it to Nuxt.js to make it more interactive. After running my Nuxt server with "npm run build...npm run start," the scripts load and my carousel/slides work fine. However, when I navigate to ...

Is it possible to customize bootstrap classes for a unique bootstrap css design?

In my MVC4 project, I faced a situation where I had a global.css class with some classes that conflicted with Bootstrap after adding it. To resolve this, I created a new file called bootstrap_migration.css. In this file, I prefixed the Bootstrap classes wi ...

Tips for implementing permission-based functions in a React frontend with a Django Rest API

I am currently using Django Rest Framework in conjunction with React on the frontend. Utilizing Token Authentication has been successful for me thus far. Now, I am looking to add permission-based functions to my React frontend. Specifically, I want only th ...

Increase the options available in the dropdown menu by adding more selected items, without removing any already selected

I came across this code on the internet http://jsfiddle.net/bvotcode/owhq5jat/ When I select a new item, the old item is replaced by the new item. How can I add more items without replacing them when I click "dropdown list"? Thank you <select id=&qu ...

Creating a gap between two rows within a Bootstrap table

Is there a way to create space between two bootstrap table rows? I am looking for something like this: --------- | A B | --------- --------- | C D | --------- --------- | E F | --------- Here is the code snippet: <script src="https://cdnjs.c ...

Utilize Tailwind CSS in React to dynamically highlight the active navigation item on click

Check out my navigation bar code: <nav className="bg-white shadow dark:bg-gray-800"> <div className="container flex items-center justify-center p-6 mx-auto text-gray-600 capitalize dark:text-gray-300"> <Link ...

Guide on how to "attach" the routes of an Angular 2 module to a specific location within the routing structure

Let's consider a scenario where the main routing module is defined as follows: // app-routing.module.ts const appRoutes: Routes = [ { path: 'login', component: LoginComponent }, { path: 'auth', ...

What is the best way to showcase the values linked to their corresponding ids in a table?

With the query below, I am joining two tables using the order_id and displaying all the values from the user_orders table. My goal is to only display the order_Id rows that match the order_manager table, as shown in the image below. public functio ...

Begin by introducing a fresh attribute to a JSON entity

Looking for help with modifying JSON data: var myVar = { "9":"Automotive & Industrial", "1":"Books", "7":"Clothing" }; I need to insert a new element at the beginning of the array, resulting in this: var myVar = { "5":"Electroni ...

How can I relocate an object to a different position within THREE.JS?

I'm trying to figure out how to move one object to the position of another object. I found some suggestions online to use the TWEEN library, but I'm having trouble integrating it into my code. Any help would be greatly appreciated :) <scrip ...

How can I create a component that dynamically adjusts to different screen sizes

I have developed three child components for the main content area (excluding the header) However, one of the components is not responsive. Below is the code snippet: <div className="row" style={{marginTop:'30px',}}> <div class ...

"Integrating Associated Models with Sequelize: A Step-by-Step Guide

I am attempting to retrieve all transactions along with their associated stripePayments, but I keep encountering the error include.model.getTableName is not a function. In my database schema, there is a table for transactions that has a one-to-many relati ...

How can I change an element using jQuery's getElementById method?

My current setup involves using a web page as a server and an Arduino as a client. Whenever a specific mode is active, the Arduino sends the following code: <LED>on</LED> The server then adjusts its status accordingly based on this input. I ...

A comprehensive guide to using Reactive Forms in Angular

I need help understanding how FormGroup, FormControl, FormArray work in Angular. The error message I'm encountering is: Type '{ question: FormControl; multi: true; choices: FormArray; }' is not assignable to type 'AbstractControl' ...

Retrieve components of Node.js Express response using axios before terminating with end()

Is there a way to receive parts of a response from my nodejs server before res.end() using axios? Example: Server router.get('/bulkRes', (req,res)=>{ res.write("First"); setTimeout(()=>{ res.end("Done"); },5000); }) Cl ...

What is causing the search feature to malfunction on the Detail page?

In my project, I have different components for handling shows. The Shows.jsx component is responsible for rendering all the shows, while the ProductDetails component displays information about a single show. Additionally, there is a Search component which ...

Tips on creating a React Vite Typescript website that utilizes the entire height and ensures a minimum width

I'm currently working on building a portfolio webpage with React, Vite, and Typescript, but I'm facing an issue where the content is not taking up the full height of the page. I have multiple pages with different lengths of content that I want to ...

When attempting to delete an item using Express and the Nodeclipse IDE, an error is raised

Is anyone experienced with this particular error encountered in the Nodeclipse IDE? app.delete('/delete', function(req, res) { .... }); The error message reads: "Syntax error on token ".", , expected" ...

Improper CSS styling leading to incorrect image size

I've got this awesome parallax image on my website (the majestic nature one) Here's how the page looks normally But sadly, it's not properly sized. When I check in Chrome dev tools, it appears like the image below, which is how I want it to ...

How can you utilize a previously opened window from another page in JavaScript?

One of my challenges involves managing windows in a JavaScript environment. When I open a child window using window.open("http://foobar","name"), it reuses the same window when opened with the same name, which is exactly what I want. However, if the origi ...