Why do certain images fail to load in ejs on the browser while others do?

Within the views directory, there is a public directory that contains the css, js, and image directories. While the css and js files in the public directory are functioning properly, only one image (specifically the logo in the navbar section) loads on the browser when the server is started up. The other images display as small icons in their designated positions. All images are stored in the same directory and linked in the same manner, so it's puzzling why only one appears on the browser. I'm unsure if placing the public directory inside the views directory is best practice. When I placed them both at the same level with app.js, all the files in the public directory stopped working. This situation highlights some anomalies:

  1. The inclusion of app.use(express.static("public")); in app.js doesn't make a difference to the functionality of the css and js files, suggesting this line of code isn't effective despite the files still working.

  2. Even though all images are linked similarly, only one displays on the browser.

  3. The term "public" is present in the source of each static file; removing it results in none of the static files working correctly.

App structure: med, webapp, main, views, partials footer.ejs header.ejs public bootstrap css js images home.ejs post.ejs news.ejs about.ejs contact.ejs app.js package.json

Indentation may help convey the structure since image uploads are not possible at present. The images in home.ejs are: img src="../views/public/images/syringe-pill-capsule.jpg" img src="../views/public/images/dna-1811955_1920.jpg" img src="../views/public/images/lab-217043_1280.jpg" Among these, only the logo in the navbar, located in header.ejs, successfully loads with the link img src="../public/images/wd.jpg"

cssnode.jsexpressbootstrap-4ejs

Answer №1

The issue arises from the incorrect path being passed to express.static. It's important to update the root to accurately reflect the actual root directory, like so:

app.use(express.static("./path-to-views/public")

Furthermore, ensure that the paths used in your HTML files are correct by adjusting them accordingly:

src="/images/syringe-pill-capsule.jpg"

UPDATE:

The usage of express.static with the root directory ('views') is valid as you had it: 

app.use(express.static("views")

However, make sure to modify the image paths in the src attributes to include the full absolute path: 

src="/public/images/syringe-pill-capsule.jpg"

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

Executing Java program from a Node.js application

After researching, I discovered a few methods for running `java` files within a `node.js` application. One option is to spawn a child process: (where the java code is contained with dependencies in an executable `jar`). var exec = require('child_proc ...

javanode.jsexpress

Node.js npm-migration enables the creation of multiple tables in a single migration process

I am new to npm-migration for nodejs and I am exploring ways to streamline the process of creating multiple tables using a single migration, rather than having separate migrations for each table creation. I have experimented with the following code: "up": ...

javascriptmysqlnode.jsmigration

What is the solution to prevent a CSS flex column from expanding to fill the width in a row with three

I am trying to create a flex row with three columns, but when I only have two columns in the row, the second column gets pushed to the right side. You can see this issue in the image below. https://i.sstatic.net/cVVqB.png In the image, the red lines indi ...

htmlcssbootstrap-4

Separate the express node js into a pair

I'm attempting to divide a code into two parts using express. Here is how I approached it: app.js var express = require('express'); var app = express(); var stud = require('./grades'); var port = process.env.PORT || 3000; stud. ...

javascriptjsonnode.jsexpressexport

Remembering checkboxes labeled as arrays

Below is the code snippet I am working with: router.post('/expenseReport', ensureAuthenticated, async (req, res) => { try { const{ startDate, endDate } = req.body; var expenseArray = []; var count = 0; var ...

mongodbexpressmongoose

Utilizing Vue with Nuxt.js: A Guide to Parsing POST Request Parameters from External Sources

I am currently facing an issue with accessing the POST request parameters from an external form in my nuxt app. Despite trying to utilize the "asyncData" method, I continue to receive an "undefined" value when attempting to access the submitted parameter t ...

javascriptnode.jsvue.jspostnuxt.js

Can flexbox elements be animated as they scroll?

Wondering if it's feasible to animate flex elements upwards when scrolled? Attempting to replicate this effect: https://codepen.io/Sergiop79/pen/bxjGEe I want to apply this to the elements below (styled in flexbox), either the entire "row" or each i ...

javascriptcssflexboxcss-transitions

CSS - Ensure the parent stays open and the submenu remains highlighted upon selection

I have integrated a CSS Vertical menu with submenus into an ASP.Net application on the master page. Clicking on each menu item directs to different aspx pages. However, when clicking on a submenu within an expanded parent menu, the page redirects as expect ...

javascriptjqueryasp.netcssmaster-pages

Error encountered: Imagemagick throwing a typeerror due to the inability to parse properties of undefined while trying to read 'convert

I'm currently working on developing a pdf conversion feature for my nestjs project. Unfortunately, I've encountered an error that reads as follows: TypeError: Cannot read properties of undefined (reading 'convert') I am pretty confiden ...

node.jstypescriptimagemagicknestjstypeerror

Enhance the user experience by adding visual appeal to the first option in the selection form. Make it

Is there a way to change the color of the first option in the selection box to grey, similar to the example above? Additionally, how can I create a clickable icon that will display all options? The current setup is not functioning correctly. <div clas ...

htmlcssformsfont-awesome

"Node.js seems to be returning an empty array instead of the expected

Database Information var mongoose = require('mongoose'); var DataSchema = mongoose.Schema({ name:{ type: String, required: true }, create_date:{ type: Date, default: Date.now } }); var Data = mo ...

jsonnode.jsmongodb

Is it possible for two Bootstrap icon class names to be used sequentially with one taking precedence over the other?

I am having an issue with toggling a class name in my code. I have a class named (bi bi-clipboard) and I want to change it to (bi-clipboard-check) when it is clicked. However, the problem is that the new class name gets added next to the existing one like ...

javascripthtmlcssbootstrap-5

Is it possible to dynamically render css using Express.js?

I have a need to dynamically generate CSS with each request. For example, in my Express.js application, I've set up a route like this: /clients/:clientId/style.css When a matching request is received, I want to retrieve the Client from the reposito ...

csslessexpressstylus

Enhance the appearance and format of white space in JavaScript code

I'm in search of a solution to automatically beautify whitespace in my JavaScript code. I have come across tools like JSLint and JSHint that can check for indentation and trailing spaces, but they might not cover all types of whitespace issues. My ch ...

javascriptnode.jsgruntjscode-formatting

Tooltips envelope around themselves

Several paragraphs contain tooltips, but some of them break onto a new line instead of staying within the text. <div class="row"> ... </div> Fiddle: https://jsfiddle.net/LhjmLw8k/29/ The issue is that certain words like "Trasimeno" and ...

htmlcsstooltip

The Twilio outbound call function encountered a 500 error due to a missing URL parameter

Check out my Twilio function: exports.handler = function(context, event, callback) { const twilioClient = context.getTwilioClient(); const to = event.to; const from = event.from; twilioClient.calls .create({ twiml: '<Response>< ...

node.jstwiliotwilio-functions

Encountering an error message "[TypeError: Arguments to path.join must be strings]" while attempting to run the command "ionic build ios"

Currently, I am in the process of developing an Ionic app on my Mac. After diligently following the steps outlined on Ionic's official website to generate a simple application, I successfully ran it in the browser. However, upon attempting to execute ...

iosnode.jsnpmcross-platformionic-framework

Compress a file using Maven and save it to a non-Java application folder

Is it feasible to implement versioning for zipped files of VUE.js applications in a Jenkins pipeline using Maven, even though they are not Java apps? I have successfully done this for other apps with Java using Maven, POM, Maven-Metadata-Plugin, Jenkins, a ...

node.jsmavenjenkinsvue.jsartifactory

Design a new CSS grid arrangement

Need help with achieving a responsive layout using CSS grid. The design should be as seen in the image link below for resolutions over 900px:- https://i.sstatic.net/QaFub.jpg For resolutions lower than 900px, the layout should switch to resemble this ht ...

csscss-grid

Querying ISO dates based on today's date in yyyy-mm-dd format using ExpressJS and Mongoose

I encountered a situation where I have data similar to this: "createdAt": "ISODate('2021-07-07T06:41:46.000Z')" To retrieve records for today, I wrote the following mongoose query. However, it did not return any results. let ...

node.jsmongodbexpressmongoosemongoose-schema