Having troubles with Navbar svg images not loading on certain pages on the express/ejs app?

Hello there, I'm encountering an issue with my navbar in an express app. The navbar is saved as a partial and included in a boilerplate wrapper used on most pages. Here's a snippet of how it looks:

<h1>HELLO<h1>

Within the boilerplate file, I've included the navbar like this: 

<%- include("../partials/navbar")%>

The problem arises when the two .svg images don't display on certain pages, even though they are formatted exactly the same. Any thoughts on what might be causing this?

Please bear with me as I am fairly new to coding, so if you need clarification or have suggestions, feel free to share them!

Thank you in advance for your help!

EDIT (lack of information):

Here's the code for the navbar partial:

<nav class="navbar navbar-expand-md sticky-top navbar-dark">
    <a href="/"> <img class="brand" src="logo.svg" alt="" /></a>
    <div class="container-fluid">
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <div class="navbar-nav">
                
                <a class="nav-link ms-3" href="/events">Upcoming Events</a>
                <a class="nav-link ms-3" href="/events/new">New Event</a>
                <a class="nav-link ms-3" href="/community">Community</a>
            </div>
            <div class="navbar-nav ml-auto rightLinks" id="navbarSupportedContent">
                
                <% if(!currentUser) { %>
                <p><%= currentUser %></p>
                <a class="nav-link" href="/login">Login</a>
                <a class="nav-link" href="/register">Register</a>

                <% } else { %>
                <a class="nav-link" href="/logout">Logout</a>
                <p class="nav-link">
                    <%=currentUser.username %><img class="profileIcon" src="profile.svg"></img>
                </p>
                <% } %>
            </div>
        </div>
    </div>
</nav>

And here's the boilerplate code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="/style2.css" />
        <link rel="icon" href="/favicon.ico" />

        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link
            href="https://fonts.googleapis.com/css2?family=Anton&display=swap"
            rel="stylesheet"
        />
        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link
            href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
            rel="stylesheet"
        />
        <script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script>
        <link
            href="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css"
            rel="stylesheet"
        />
        <link
            rel="stylesheet"
            href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
            integrity="sha384-Gn538...

If it helps, all affected pages and images are in the same directory within the public folder.

Each file starts with <% layout("layouts/boilerplate") %>, yet only displays the images on specific pages.

cssexpressejs

Answer №1

First Point:

The img tag should not have a closed tag, it is incorrect to include it.

<img class="profileIcon" src="profile.svg"></img>

To correct it, remove the closing tag as shown below:

<img class="profileIcon" src="profile.svg">

Second Point: You mentioned that the images are in another directory but did not specify the route in the src attribute.

src="profile.svg"

To correctly specify the route, there are two options:

Option 1:

src="../public/profile.svg"

Option 2: If you are using Express, you can make the public folder static in your server.js file like this:

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

Then you can directly route to the public directory like this:

src="./public/profile.svg"

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

Ensure to release the connection once it has been utilized, using a connection pool in

I am pondering about the proper place to release a connection after using it. There are several options I have come across: pool.getConnection(function(err, conn){ //conn.release() // should be placed here (1)? conn.query(query, function(err, res ...

mysqlnode.jsexpress

Exploring the analysis of JavaScript and CSS coverage throughout various pages or websites

The Chrome Dev Tools JavaScript and CSS Coverage Drawer is quite impressive, but there is one thing that could make it even better. It would be great if it could remain active without restarting its analysis every time you visit a new page. I wish I could ...

javascriptcssgoogle-chrome-devtoolscode-coverage

What is the best way to ensure that the size and maximum length of a text input box are properly aligned?

Is there a way to ensure that the size and maxlength attributes of a text input box align correctly? It can be frustrating when these attributes don't match up due to font differences. Example Input: <input type="text" size="4" maxlength="4" /> ...

htmlcssforms

The EJS is causing a problem with linking the style sheet

Currently, I am in the process of familiarizing myself with ejs, express, and node js. Facing an issue while trying to link my style sheet to my header, below is the code snippet and here is a https://i.stack.imgur.com/0BEIn.png. Utilizing include for bo ...

cssnode.jsejs

Include the attribute exclusively for the initial division within a group of corresponding elements

Looking to change the appearance of this HTML code without being able to edit it directly? <form method="POST" id="go123pago"> <div align="center" style="width:220px"> <div style="float:left;padding:10px;width:190px"> ...

jqueryhtmlcss

The mobile navigation in HTML has a slight issue with the ::after pseudo-element, specifically within the

As I prepare to launch my website, I have made adjustments to the mobile layout by moving the navigation links to a navigation drawer. The template I am using included JavaScript scripts to handle this navigation change. However, I encountered an issue whe ...

javascriptcsshtmlmiva

Pretend to be a socket using Socket.IO

Context: Currently, I am utilizing Express, http.Server, and Socket.IO to develop a game. With each connection established, a socket session is created through which server-client communication occurs. My goal now is to incorporate AI into the game to enh ...

expresssocket.io

Opting for express.json over express.bodyparser

My focus is on constructing a basic REST API that exclusively allows JSON input. My decision is to utilize app.use(express.json({strict: true})); over app.use(express.bodyParser());. By including strict: true, I believe it will enhance security by safegu ...

node.jsexpressnode.js-connect

Guide on implementing csurf middleware with tsoa express

As a beginner in Tsoa, I am looking to incorporate CSRF implementation into my Node app. While I have managed to create APIs using app.use(), I would like to know if there is a way to achieve this using Tsoa. ...

node.jsexpresscsrftsoa

Changing the sliding underline effect in a jQuery navigation bar

Recently, I implemented a sliding underline element in my navigation bar. The idea is that when a link is hovered over, the underline smoothly transitions to that element. You can take a look at the codepen example here: https://codepen.io/lucasengnz/pen/e ...

javascriptjqueryhtmlcss

Turn off scrolling but allow dragging on iPhone

Is it possible to disable scrolling but still allow dragging on the <canvas> element in iPhone? Currently, when you drag the <canvas>, the entire page also scrolls, which is not the desired behavior. <meta name="viewport" content="wid ...

htmlioscss

"The Power of Node.js Multer for Handling File Uploads

I am looking to personalize the filename of my app based on the input value rather than the fieldname. In simpler terms, I want to replace file.filename with something like req.body.my_field, where my_field is the name of an input. Ultimately, I aim to ach ...

node.jsexpressfilenamesmulter

Exploring Bootstrap 4: Creating list-inline elements for various screen sizes

Is there a way to align list items on top of each other for a breakpoint <=575px (xs), and align the items next to each other for a breakpoint >575px (sm) using Bootstrap display properties? I found some information on How to display a list inline u ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Step-by-step guide: Creating a captivating triangular shape on the current tab

I am trying to implement a dynamic tab using Bootstrap where clicking on a tab will display a thicker black underline, like in this image: https://i.stack.imgur.com/h48GB.png To achieve the black line effect, I have added the following code: .nav-tabs.n ...

htmlcsstabshoverselected

Working with variables passed from Node.js in Jade processing

Currently, I have a situation where my script is sending a matrix that looks like this: [[1,2,3,4], [7,6,5,4], [2,3,4,5]]. After sending it using res.send(JSON.stringify(dataArray)); and viewing it in jade with h1#results, I can see that the format appears ...

javascriptajaxnode.jsexpresspug

Using Express to host the webpack-dev server

I have been using webpack-dev-server to run my project, but now I want to switch to running it through an express app. What steps do I need to take for this transition? My Package.json details: { "name": "react-redux-template", "version": "1.0.0" ...

node.jsreactjsexpressdockerwebpack

The scrolling feature within individual div elements seems to be malfunctioning in Ionic 2

In my current project using Ionic 2, I am faced with the task of designing a screen that contains two distinct grid views. The first grid view needs to occupy 40% of the height, allowing for scrolling within that specified area. On the other hand, the se ...

htmlcssangularjsionic2hybrid-mobile-app

Issue with spacing dropdown choices within primary navigation bar

Struggling with my final project for a class as the semester comes to a close. I've received minimal help from my Professor and hit a roadblock. The main navigation on the side is working correctly, but the dropdown options are stacking on top of each ...

htmlcss

CSS printing displays a blank bar in white color

Attempting to generate a ticket with the dimensions of 203mm x 82mm using HTML and CSS through Python (including cgi, jinja2, weasyprint). The template will be converted into a PDF for users to download via a button on the website. The HTML Body: <body ...

htmlcssprintingcgiweasyprint

Adjusting the width of the container <div> will automatically resize the inner <div> to match

I have a main container element. .wrapper{ border:1px solid blue; position:relative; top:20%; left:30%; height: 300px; width: 350px; } When I adjust the width of the parent container, the child box does not reposition itself accor ...

javascripthtmlcss