Why does a React error keep popping up when trying to set a background-image in my CSS?

I've been working on my React project and I can't figure out why I keep encountering this error. I double-checked the URL paths and made sure they were named correctly, yet the error persists.

Here is a snippet of my CSS:

  background-image: url("../assets/img/header-bg.jpg");

And here's another image:

  background-image: url("../assets/img/map-image.png");

This is the error message I'm seeing:

If the image doesn't display, I receive this error:

Error: Can't resolve '../assets/img/header-bg.jpg' in 'C:\Users\bryan\start-bootstrap\src\assets\css'

The pathway for my images and CSS files is as follows:

src > assets > img > header-bg.jpg,map-image.png

In addition, my assets folder contains a CSS folder with my styles, which includes Bootstrap:

src > assets > css > style.css
javascripthtmlcssreactjs

Answer №1

The reason your code isn't functioning correctly is most likely due to the Node.js module searching for /assets/assets/img/map-image.png (it's looking from CSS). To resolve this issue, simply delete the /assets portion of the property.

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

What is the correct way to upload an image using the Express static middleware?

Just diving into express, I have this setup in my server: app.use(express.static(path.join(__dirname, 'includes'))); When it comes to my client-side JavaScript, I'm simply using the URL like so: var img = $("<img />").attr('s ...

javascriptnode.jsexpress

Checkbox enabled Bootstrap image

I am encountering a minor issue where I am attempting to incorporate a simple image that can be toggled on and off by clicking on it. After coming across some bootstrap code online, I decided to test it in my project. Unfortunately, the code does not seem ...

javascripthtmlcss

I have encountered an issue where after declaring a JavaScript variable on a specific page, including the JavaScript file does not grant access to it

<script type="text/javascript"> $(document).ready(function () { var SOME_ID= 234; }); </script> <script type="text/javascript" src="<%= HtmlExtension.ScriptFile("~/somefile.js") %>"></script> ...

javascriptjquery

How to resolve preventDefault issue on else condition during form submission in CoffeeScript on Rails 4

After submitting a form, I have implemented a code to prevent the page from refreshing and perform different actions based on certain conditions. Everything works as expected except for one scenario where the page still refreshes after executing the ELSE c ...

javascriptjqueryruby-on-rails-4coffeescript

Endless Google Locations Instances

My database entries are being displayed in a table using input fields. I want the Location field for each entry to be automatically completed using Google's API. HTML: <input name="edit_airplane[1][location]" type="text" class="airplane_location" ...

javascriptjqueryhtmllocationgoogle-places-api

Remove a specific income entry from a user's array of financial records

MongoDB user removal https://i.stack.imgur.com/oVoxt.jpg Utilizing Controllers: https://i.stack.imgur.com/PvWmC.jpg module.exports.deleteIncome = (params) => { return User.findById(params.userId) // Querying the user object .then( ...

node.jsreactjsmongodbexpressmern

Utilize ReactJS and AJAX to easily upload images

Having trouble with uploading an image through a form to a url/api. When I submit the form, I'm calling the handleImgUpload() method. The issue is that the request being sent is coming back empty. Seems like there might be a problem with new FormData ...

javascriptjqueryajaxreactjs

Extracting a nested property from a JSON object without relying on the lodash get method

We have a sample json data: { "name": "app", "version": "0.1.0", "description": "Sample description", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "so ...

javascriptjsonnode.js

What methods can be used to authenticate the user's input?

I am facing an issue with my program where it breaks if there is a space behind the last number entered. I want to prevent the function from breaking when a space is entered. I tried using $.trim but couldn't get it to work. I also attempted using an ...

javascripthtml

Radio buttons have been concealed and are not visible

Tried the solutions recommended in a previous question about radio buttons not showing in Safari and Chrome, but unfortunately, it did not solve my problem. It seems like this issue is different from the one discussed in that question. The WordPress them ...

htmlcssradio-button

Calculate the sum of a specific column in an HTML table using JavaScript after

I have a function called CalColumnHistDEPOSITO() that I use to sum a table column as it loads from the server side into my HTML page. However, when I apply a filter, it continues to sum the entire table ignoring the filter. (function() { 'use stric ...

javascripthtml

Watching a service's attribute from within a route in the EmberJS framework

There seems to be a concept that I'm struggling to grasp here. To my understanding, any instance of Ember.object should be able to observe properties on another instance of Ember.object. In my scenario, there is a service, a router, and a component i ...

javascriptember.js

"Enhance user experience with Sweetalert 2's customizable sorting options for select inputs

Here is the code snippet that I am currently working with: this.getdata((params.....).then((data) => { var selectOptions = []; for (let i = 0; i < data.length; i++) { selectOptions[data[i].id_calc] = data[i].surname + " " + data[i ...

javascriptreactjssortingselectsweetalert2

There is zero gutter in Bootstrap

Is it possible to use the bootstrap grid system without any gutters? I want to have 3 columns in one row like this: http://prntscr.com/6gpmhm. I have shared the markup for the CSS I am using, which is the default CSS of the framework. <section class ...

htmlcsstwitter-bootstrap

What is the best way to display values from a Localstorage array in a tabular format using a looping structure

I have set up a local storage key 'fsubs' to store form submissions as an array. Here is how I am doing it: var fsubs = JSON.parse(localStorage.getItem('fsubs') || "[]"); var fcodes = {"barcodeno" : this.form.value.barcode, "reelno" : ...

javascriptangulartypescriptlocal-storageangular-local-storage

The mat-datepicker appears in a unique location each time it is opened

I am facing an issue with my mat-datepicker appearing in the opposite place when clicked on one component. How can I resolve this? I have two different components with mat-datepicker, but they behave differently. I suspect that imitating a click in one com ...

javascriptangularangular-materialmat-datepicker

Ways to manually trigger a reevaluation of Vuelidate validation

Is there a way to trigger Vuelidate to re-check a validation? For example, I have a form field where users can input the name of a remote directory. There is a Vuelidate validation in place that communicates with the server to verify if the directory exis ...

javascriptvue.jsvuelidate

What are the steps to execute a Next.js app post cloning the repository?

After creating a Next.js app using npx create-next-app@latest, I proceeded to push the new application to a GitHub repository. Upon cloning the repository into a fresh directory, I encountered an issue while attempting to execute the app with npm run dev. ...

reactjsgitnpmnext.js

Rendering issues arise when using a combination of Electron, ReactJS, and Material-UI

Currently, I am developing a desktop application using Electron, ReactJS, Redux, Material-UI, and Webpack. While most components work smoothly, there seems to be an issue with certain Material-UI elements like <IconMenu /> and <CircularProgress /& ...

reactjssvgwebpackelectronmaterial-ui

Implementing AngularJS table filters on user click

As a newcomer to angularjs, I am attempting to implement a filter on click. The user will select a source and destination, then click on the filter button. The table should display results based on the input. Upon page load, the table should already contai ...

javascriptangularjsfilter