Obtain the origin of the image using dots in Javascript

Sharing my experience with setting a background image using Javascript. Initially, I tried using two dots like this:

.style.backgroundImage = "url('../images/image00.jpg')"

However, it did not work as expected. So, I removed one dot:

.style.backgroundImage = "url('./images/image00.jpg')"

This time, it worked! I was surprised because in CSS, we typically use two dots to go back in the directory structure. My folder structure looks like this:

  • Folder 1
    • index.html
    • images
      • image.jpg
    • scripts
      • scripts.js
    • styles
      • styles.css

I find it interesting that only one dot works in Javascript while two dots work in CSS for navigating directories.

Thank you!

javascriptsrc

Answer №1

There seems to be a misunderstanding here. It's not about one dot in JS and two dots in CSS. This actually relates to filepaths and how files are referenced.

For example, using two dots like 

document.body.style.backgroundImage = "url('../images/image00.jpg')"
indicates the file is located up one directory level from the current one.

On the other hand, using one dot such as 

document.body.style.backgroundImage = "url('./images/image00.jpg')"
means that the file being referenced is in the current directory.

Answer №2

When referencing from the HTML file, it's important to use the correct notation. Whether the CSS is located within the HTML file or if there is JavaScript affecting the CSS in the same file, the single dot notation is the way to go.

However, if the style is defined in a separate styles.css file, then the double dot notation is needed to move up one directory before navigating down into the images folder.

This all boils down to understanding file path notation and using it correctly for effective referencing.

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

The system detected a missing Required MultipartFile parameter in the post request

Can anyone explain to me why I am encountering the error mentioned above? I am unable to figure out the reason. Below is my code, please review it and suggest a solution for fixing this error. The objective is to upload multiple files to a specific locatio ...

javascriptjavaarraysajaxjquery-file-upload

Navigating the DOM in Vue.js: A Step-by-Step Guide

While I am trying to utilize Vue.js to access the DOM, the code I have written within the mounted() lifecycle is not producing any results. Interestingly enough, the same code functions perfectly fine when using vanilla JavaScript. I have incorporated the ...

javascriptvue.jsdomvuejs2vue-directives

How to enable the Copy to Clipboard feature for multiple buttons and transition from using an ID to a class identifier

Can someone please assist me? I have a copy to clipboard function that works well for IDs and a single button on my website. However, I need to modify it to work for multiple buttons and values with a class identifier. Unfortunately, I am unsure how to mak ...

javascriptjqueryhtmlclipboardcopy-paste

Why is useEffect being executed twice?

For some reason, when I try to run useEffect for the first time page load, it ends up running twice. I can't seem to figure out why this is happening. Can someone please provide assistance? I'm currently using React 18 and I need help understand ...

javascriptnode.jsreactjs

Disabling the global ajax datatype causes issues with Rails remote links

I have successfully developed a rails application that submits a form remotely and then displays form validation errors if the validation process fails. The form itself is working perfectly. However, I've come across an issue where the way I've ...

javascriptjqueryruby-on-railsjsoncoffeescript

What is the best way to uncheck a checkbox once both of my input fields [type=text] have been cleared or are empty

Is there a way to uncheck the checkbox input if both text inputs are empty, and check it if one of the text inputs is filled? $('input[name="t2"],input[name="t3"]').keyup(function() { $('input[name="t1"]').prop("checked", $.trim($( ...

javascriptjqueryformsfunction

Is it a problem with Cucumber Js callbacks or a feature issue?

I would like to create a scenario similar to this: Scenario: initialize new Singleton When an unmatched identity is received for the first time Then create a new tin record And establish a new bronze record And generate a new gold record This s ...

javascriptcallbackcucumbercucumberjs

Performing MongoDB aggregation to tally the number of documents in a query for every array field

Here's an example through JS code of what I'm trying to achieve: let waiting = findSessions() // regular query for status "WAITING" let results = []; for (let w of waiting) { // Only push it to results if the w.members[0] and TARGET_USER_ID h ...

javascriptnode.jsmongodbaggregation-framework

How to retrieve the user-agent using getStaticProps in NextJS

Looking to retrieve the user-agent within getStaticProps for logging purposes In our project, we are implementing access and error logs. As part of this, we want to include the user-agent in the logs as well. To achieve this, we have decided to use getSta ...

javascriptreactjsnext.jsserver-side-renderinguser-agent

What is preventing the input box from shrinking further?

I created a search box using CSS grid that is supposed to shrink when the page is resized. However, it doesn't seem to shrink as much as I expected it to. Here is how it appears when fully extended: https://i.stack.imgur.com/tPuCg.png And here is how ...

javascriptcssreactjscss-grid

Issue with incorrect date being retrieved in MongoDB response from a node server

My date in mongodb is structured as follows: ISODate("2020-08-03T00:00:00.000+05:30"), However, after querying the date, it appears like this: 2020-08-02T18:30:00.000Z I am looking to get the correct date of 2020-08-03. What could I be doing wr ...

javascriptnode.jsdatemongoosemongoose-schema

How can the @blur event be added to the vue-bootstrap-typeahead in Nuxt/Vue application?

I am facing an issue where I want to trigger a function upon leaving an input field. The input in question is set up using vue-bootstrap-typeahead. Upon inspecting the DOM, I found that the structure of the input element looks like this: <div id="m ...

javascriptvue.jsnuxt.js

set ajax url dynamically according to the selected option value

My form features a select box with three distinct choices <select id="tool" name="tool"> <option value="option1">Option1</option> <option value="option2">Option2</option> <option value="option3">Option3</ ...

javascriptjqueryhtmlajax

The order of execution is not maintained for $.getJSON() calls within the $.each() loop

As I iterate through an HTML table, I am making a $.getJSON() request based on the data in each row. My goal is to retrieve the data from that $.getJSON call and update the corresponding row with it. Unfortunately, when I run my code, it seems to be execu ...

javascriptjqueryajaxgetjson

The initial row's Id will be used as the Id for all subsequent rows within a JSON object

After dragging a tr in a table and confirming by clicking a button, I need the order list to be updated in the database. To achieve this, I created a JSON object where I intend to save the ids and their corresponding new orders. The issue I am facing is t ...

javascriptjquerynode.jsjson

Chrome Developer Tools - Array Length Discrepancies

While exploring Chrome DevTools, I came across an inconsistency that caught my attention. The screenshot above shows the issue I encountered. Initially, it indicated that the object contained a Body and a Head, with the head being an array of length 1. Ho ...

javascriptarraysgoogle-chromegoogle-chrome-devtoolsconsole.log

Managing a single repository with multiple packages using npm

Currently, I am in the process of developing a node.js application that requires scalability and maintainability. The concept revolves around having a single repository with multiple modules embedded within it. We have opted to utilize local modules with ...

javascriptnode.jsnpmnode-modulescodebase

Establishing a recurring interval when the component mounts for a specified period of time

I have read through several Q&As on this topic, but I am still unable to pinpoint what mistake I am making. The code snippet below is meant to display a countdown in the console and update the DOM accordingly, however, it only prints 0s in the console ...

javascriptreactjsasynchronoussetinterval

How to achieve a typewriter effect in React using JavaScript

I've been attempting to incorporate a typewriter effect into my website - at the moment, the animation is functioning but each letter appears twice (e.g. instead of reading "Welcome!" it displays "Wweellccoommee!!"). I suspect this is an asynchronous ...

javascriptreactjsasynchronousreact-statereact-effects

Controller is not being triggered by Ajax method when there is a decimal value

I am currently working on implementing a time registration feature in my web application. Users can select the project they worked on and enter the number of hours spent on that project. Everything is functioning properly until users start adding half-hou ...

javascriptc#asp.netajaxasp.net-mvc