The backgroundImage function is having trouble locating the specified URL path

I'm struggling to set a backgroundImage because it's not recognizing the local path URL.

Here is my code snippet:

import { makeStyles } from '@material-ui/core/styles';
const loginWrapperStyles = makeStyles(theme => ({
    image: {
        backgroundImage: 'url(../../../public/assets/regbackground.jpg)',
}}))

When I tested the import statement to locate the assets folder, they confirmed that the path was correct:

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

This is the exact name and format of the image file:

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

However, despite all this, my image still fails to render. What am I doing wrong?

cssreactjsmaterial-ui

Answer №1

Give this a shot 

import { createStyles, makeStyles } from '@material-ui/core/styles';
import backgroundImage from '../../../public/assets/regbackground.jpg';

const loginStyles = makeStyles(theme => createStyles({
    image: {
        backgroundImage: `url(${backgroundImage})`,
    },
}));

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

Is it possible to make my Toggle/Click event refresh the entire component every time it is clicked?

I'm trying to implement a toggle function to show/hide a specific DIV and dynamically change the button text based on the current state in React Hooks. However, every time I click on it, the entire page seems to re-render in Next.js. I'm not enti ...

reactjstypescriptnext.js

Tips on adjusting section height as window size changes?

Working on a website that is structured into sections. Initially, all links are aligned perfectly upon load. However, resizing the window causes misalignment issues. Check out my progress at: karenrubkiewicz.com/karenportfolio1 Appreciate any help! CSS: ...

htmlcss

What is the technique for filtering multiple values using the OR operation in ng-model functions?

Currently, I am using an ng-modal labeled as "myQuery." At the moment, there are two filters in place that look like this: <accordion-group heading="" ng-repeat="hungry_pets in Pets" | filter:{hungry:false} | filter:{name:myQuery}" ... > I have ...

javascripthtmlcssangularjsangular-ui-bootstrap

Here's a unique version: "Strategies for effectively closing a modal when moving to a

I'm currently working with react-router-dom and material UI modal, and I am looking for a way to automatically hide the modal whenever the user navigates to another page. Here is my App component: const App = () => ( <BrowserRouter> &l ...

javascriptreactjsmaterial-ui

Tips for Changing Background Color Beyond Body Tag

When using my demo below on Safari for iOS and scrolling up and down, you'll notice that you can scroll outside of the body until removing your finger from the touchscreen. The background color outside of the body is white. Is there a way to change th ...

ioscssmobilebackground

The ideal method for eliminating a targeted border in HTML

I need to make a table more visually attractive by removing specific borders without affecting the overall design. After applying the border-collapse property, I attempted to remove the right border from certain cells using CSS. However, this unintentional ...

htmlcsshtml-table

Using a pseudo-element after to center CSS content

Although there are numerous posts discussing this topic, my situation is unique. In my case, I have a collection of colors represented by circles. When I click on a circle, I add content in the form of a check mark by including a class selector with an af ...

htmlcssangularjs

Moving TextField label orientation

I'm having trouble adjusting the position of a label within a TextField without having to change the entire project layout to right-to-left (RTL) like I've seen in other solutions. I simply want to customize the style for this specific component. ...

reactjsmaterial-uipositionuitextfieldstyled-components

How can I devise an App shell that is stored in cache for a Progressive Web application built with React?

Currently, my React app is bundled into a single JS file using webpack. I am looking for a way to separate the UI shell of my app from the rest of the logic so that the service Worker can cache it. How can I achieve this? This is what my webpack config fi ...

user-interfacereactjsservice-workerprogressive-web-apps

Trigger the Material UI DatePicker to open upon clicking the input field

I have a component that is not receiving the onClick event. I understand that I need to pass a prop with open as a boolean value, but I'm struggling to find a way to trigger it when clicking on MuiDatePicker. Here is an image to show where I want to ...

javascripttypescriptmaterial-ui

Tips for creating a captivating full-screen parallax section on your website

Is there a way to make the first section of a parallax site full screen? I've been scouring the internet for a solution to this problem, but I'm not having any luck. Almost every parallax site I come across has their first section full screen, a ...

jquerycsswebfullscreen

I am currently working on incorporating Azure AD B2C authentication into my Next.js application, but I keep encountering an issue where I receive an error stating that the challenge

Recently, I encountered an issue while integrating Azure AD B2C using the Next Auth package. An error related to code challenge was thrown, and I have provided a screenshot of it. Upon further research into SPA documentation, I learned that adding a code ...

reactjsnext.jsazure-active-directorynext-authazure-ad-b2c

Incorporating multiple CSS style sheets within a single HTML document

As part of my assignment, I have successfully created two different CSS style sheets. The next step is to link both style sheets to a single HTML page and provide users with the option to switch between the two styles. I am wondering how to achieve this. ...

javascripthtmlcssdreamweaver

Kindly make sure that the package.json file contains a valid "main" entry

Just added Bootstrap to my React project using npm. Imported Bootstrap with the following code: import 'bootstrap/dist/css/bootstrap.min.css'; However, I encountered an error that says: Cannot find module 'D:\project\my-app\n ...

reactjsnpmbootstrap-4import

Discover the secrets of extracting the ID from a MenuItem within a Menu

Table Ui with menu Struggling with fetching the correct user ID in the edit button The edit button for all users is only displaying the last user's ID If the edit button is not nested inside the Menu, it works fine. However, within the Menu, it onl ...

javascripthtmlreactjsmaterial-uifetch

What is the purpose of utilizing providers in software development, such as context providers, theme providers, and Redux providers?

As a beginner in Redux, I have been exploring wrapper components such as: Provider, ThemeProvider, contextProvider etc. which are mentioned in the documentation as essential for accessing the store in nested components. I am eager to dive deeper into und ...

reactjsreduxmaterial-ui

What is the best way to apply a top padding to a background image using CSS?

I attempted to adjust the top padding using various pixel values in the style, but the image padding relative to the webpage remained unchanged. For example: padding-top: 5px; Here is part of my code snippet: <div class="row pb-5 mt-4" style ...

htmlcssbootstrap-4

Altering the character by striking a key

I have a canvas with custom styling. In the center of the canvas is a single letter. Please see the code below for reference. The goal is to change the displayed letter by pressing a key on the keyboard. For instance: Letter A is centered in the canvas: P ...

javascripthtmlcssevents

"Missing metadata appears to be a hiccup in the Next.js 13.4.1 tab

After defining the metadata object as shown below, I noticed that it doesn't appear on my Chrome tab; instead, it only displays "localhost:3000/#home". All my .jsx files are labeled with "use client" since this is a portfolio project meant to be uploa ...

reactjsnext.jsmetadata

Guide to opening a link in a new tab within the same webpage

I have observed numerous web applications that feature a single web window with multiple links. When clicking on the links, the corresponding form opens in a new tab within the same web page of the application. I'm curious about how to achieve this fu ...

jqueryhtmlcssajaxjquery-ui