I'm not sure what's causing the issue with my image URL not functioning properly

Here is the path to the image I am trying to display:

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

This is the code snippet I have in my file:

<div class="container-fluid">
  <a class="navbar-brand" href="/">
    <img src="../galery/logo.png" alt="logo">
  </a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
<div>

I can't seem to get the image to display correctly, and I'm not sure what the issue might be.

htmlcssbootstrap-4

Answer №1

The document saved on your personal computer is not the same as a file stored on your web hosting server. It's essential to do more than just upload an image to a folder; you must also establish an endpoint on your server that can deliver an image in response to a particular GET request from the user's browser.

Consider adding this line to your APP.js:

app.use("/gallery", express.static(__dirname + "/gallery"));

Make sure to update the image URL like this:

<img src="/gallery/logo.png" alt="logo">

Answer №2

It's important to consider the framework or language you are using when setting global variables. Many languages provide a way to set and get these variables, which can be useful for storing things like image paths for a gallery. Consider utilizing this feature in your framework to easily access and display images in your project.

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

Unlocking the secrets of Nested JSON data in ngContainer

I am having trouble retrieving certain fields from a JSON Object in order to populate an expandable table using Angular Material. When I attempt to access these fields using the '.' or '[]' notation, the value returned is 'undefine ...

htmltypescriptangular-materialangular7

Can you explain the variance between a DIV using display: inline-block versus a SPAN element?

Can you explain the distinction between a DIV using display: inline-block and a SPAN? Furthermore, what sets apart a SPAN with display: block from a DIV? ...

htmlcss

Is Toggleclass malfunctioning?

I have been working on making the 'timelineTile' div open and close, as well as making it close if another one is opened or if the background is clicked. I have successfully implemented the functionality to close the div when another one is click ...

jqueryhtmlcssclasstoggle

Problem with IE off-canvas scrolling

Currently, I am facing an issue with the scrolling functionality of an off-canvas sidebar on my Joomla 3 website. It seems to be working fine in Chrome and Firefox, but when it comes to Internet Explorer, the visible scroll bar refuses to move when attempt ...

javascripthtmlcssjoomla

How can you stop text in a textarea from spilling over into the padding?

When I add padding to a textarea element and type more than four lines of content, the content overflows into the padding. Is there a way to prevent this? I have looked at the suggestions in this thread and this one (specifically for google-chrome), but t ...

htmlcss

Creating a color gradient for hyperlinked text when hovered over: a tutorial

How can I achieve this effect using CSS only? I want the link color to change from #00C to #000 when hovered over, with a gradient transition taking 1 second. ...

csshover

Is there a way to make a trio of buttons arranged in a flex column slide out to the left when hovered over using flexbox?

access the code example here .container { display: flex; flex-direction: column; border: 2px solid blue; } .mainCont { display: flex; background-color: #f2f2f2; min-height: 5em; justify-content: space-between; } .btn-group { display: f ...

jqueryhtmlcssflexbox

Sort items based on the value of the chosen option

The snippet of code provided appears to be functioning properly, but there is an issue with error correction. If a mistake is made in the order, the entire text gets erased and restarts from scratch: function getValues() { var result = []; var me = this; ...

javascripthtml

Discover the step-by-step guide for inserting personalized HTML into the current widget screen on Odoo 12 with

For the past 3 days, I've been stuck trying to figure out how to print order items. My goal is to have a custom HTML code added to a div with the class 'order-print' when the Order button is clicked. I am using odoo 12 and facing issues wit ...

javascripthtmlodoo

SVG Sprite remains functional even after deleting the element

Within my index.shtml, I include the following code: <object data="icons/svg-sprite.svg" type="image/svg+xml" width="0" height="0" style="display: none;"></object> Inside my svg-sprite.svg file ...

htmlcsssvgsprite

The simple method for incorporating line feed in <s:textarea>

Hey there, I'm currently utilizing struts 2 UI and I seek a means to restrict the number of characters in each row to only 16. Additionally, I want to impose a maximum length limit of 32 characters. Despite my attempts using the 'row' and &a ...

htmlstruts2

You can generate a TBODY element by utilizing an Array

I have an array with the following structure. https://i.sstatic.net/5AdO9.png below is the code I am using success: function(data) { data = $.parseJSON(data); for (i = 0; i < data.length; i++) { con ...

javascriptjqueryhtmlarrays

Ways to retrieve and contrast the border style of an image utilizing javascript

I'm currently attempting to identify images on my webpage that have the style border: 1px #c6c6c6 solid; let images = document.getElementsByTagName('img'); for (let i = 0; i < images.length; i++) { if (images[i].style.border === "1px ...

javascriptcss

Combining color and typography classes using Tailwind merge is currently not supported

In my custom styling setup, I have created a custom color class called text-green (colors) and a custom typography class called text-card-highlight (utilities), which includes font size and weight attributes. However, when using tailwind-merge, only one of ...

cssnext.jstailwind-css

How come the mouseover effect on the div remains even after the mouse has been removed?

How can I keep the original CSS class when the mouse moves away? function highlight( x, y) { var sel=document.getElementById(y); sel.style.borderBottom= "2px solid "+x; sel.style.opacity="1"; sel.style.transition="all eas ...

javascriptcssdom-eventsjavascript-objects

Guide to placing an image in a designated position

I am looking to achieve the following scenario: Whenever a user uploads an image, it should appear in one of the smaller boxes on the right. Subsequent image uploads by clicking on the big box should populate the other small boxes on the right. Please refe ...

javascripthtmlimage

transforming a table into a stylized CSS design

Seeking assistance in converting a table into CSS as I am new to CSS: <table dir="ltr" width="500" border="0" align="center"> <caption><font face="Helvetica">Movies</font></caption> <colgroup width="50%" /> ...

htmlcss

Executing a JavaScript function within a PHP echo statement

I am completely new to working with AJAX and PHP echo variables or arrays. However, I have managed to successfully display images on my website by passing variables from AJAX to PHP and back. The only problem I am encountering is when I try to call a Javas ...

javascriptphpjqueryhtmlajax

Firefox has trouble with jQuery AJAX as anchor tags in returned HTML are not clickable

The issue at hand: In Firefox, anchor tagged text in the returned HTML is not clickable (no "hand cursor" and no action), while IE 10 seems to handle it without any problems. The scenario: I am utilizing jQuery AJAX to request a PHP page that fetches HTML ...

jqueryhtmlajaxhyperlinkanchor

Creating a CSS triangle that smoothly transitions between two different colors

Is it possible to create a triangle in CSS that smoothly transitions between two colors without relying on a hover state? .arrow-down { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; b ...

javascriptcss