Troubleshooting a Next.js background image problem when hosting on Netlify

I've encountered an issue while attempting to deploy a nextjs website on Netlify. Everything works perfectly on my local server, but once it's on Netlify, the background image URL changes and the image becomes invisible.

Original CSS code: 

background-image: url(./../../../public/drImage.jpg);
When inspecting the hosted site in Chrome: 
background-image: url(webpack:///mini-css-extract-plugin/_next/static/media/drImage.be718e5f.jpg);

I haven't been able to find a solution to this problem anywhere.

Interestingly, manually changing the URL while inspecting the hosted site in Chrome displays the image perfectly.

cssreactjsnext.jsbackground-imagenetlify

Answer №1

Start all static image paths from the public folder for easy reference.

Eliminate any "../" and simply use the image's file name, like "drImage.jpg".

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 the official tutorial for setting up vercel/postgres with Next.js giving you trouble?

I've been following the step-by-step guide on the official Vercel website, but I keep encountering an error even though I'm certain I followed all the instructions correctly: The code I used is identical to the demo: import { db } from '@ve ...

sqlpostgresqlnext.jsvercelnext.js13

When working with ReactJs, we leverage the powerful Formik library for managing forms alongside the Yup library for validation

Using ReactJs with the formik library to manage forms and Yup library for form validation rules. I am attempting to use the "yup.array().of()" validator to validate an array of fields (name, gender) passed from another component via props. These componen ...

reactjsformikyup

Heroku: Showcasing a unique page during the application's startup process

Would it be feasible to showcase a static HTML page while the dyno is starting up, just like how a custom page can be shown during errors or maintenance mode? The size of my app's slug is quite significant, leading to a startup time of almost 50 seco ...

htmlcssherokudyno

Choosing descendant elements in CSS styling

Is there a way to select child elements in sequence? For instance: <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li> ...

htmlcss

Overflow of Div Content

I need a way to showcase a collection of around 30 links in a horizontal layout without the links wrapping to a new line if they exceed the width of the parent container. A horizontal scroll should appear for users to navigate through the overflowing links ...

htmlcssflexbox

Configuring the client side to display a 404 response when accessing a page through Strapi CMS

Currently, I'm utilizing Strapi CMS and Next.js to display pages from the Strapi CMS. My goal is to modify the status code to 404 in the browser network window whenever an individual lands on an unknown page where no data is found within the CMS. In s ...

next.jsstrapi

The padding of DateTimePicker from Material UI gets altered upon reloading the page

Experiencing an issue with the DateTimePicker component from Material UI. Upon page reload, it seems to lose its initial padding of 10px on each side. Initially, upon rendering, it appears as shown below: However, after reloading the page, it changes to: ...

reactjsmaterial-uistyled-components

Enhancing the content of a field - React

Seeking assistance with populating an input field with a generated password in my React component. Currently, the password is showing as undefined. MainComponent.js - primary React component class MainComponent extends React.Component { state = { p ...

javascriptreactjs

On a Samsung tablet with Moodle, the body background image is set to display at the top

Encountered an issue with Sambungs tables. I have a background image set on the body. Here is how the CSS looks: html, body{ background: url('img/background.jpg') no-repeat; background-position: top; // I also tried cover, fixed, etc } The ...

htmlcssmoodle

Utilizing Material UI: Exploring the Integration of Theme Values within withStyles

Currently, I am in the process of developing a component using Material UI and incorporating the default theme file (found here https://material-ui.com/customization/default-theme/). I have successfully utilized certain values from the theme by employing ...

reactjsmaterial-ui

Issues with CSS rendering have been observed following an ajax update when using the <ui:repeat> tag

This scenario is a bit intricate. Essentially, I am utilizing Material Design Lite CSS provided by Google and triggering an AJAX request to dynamically add input fields using PrimeFaces. <h:commandLink value="+ Add something> <f:ajax listener ...

cssajaxjsfmaterial-design-lite

How can the Material UI select component be customized to automatically scroll to the top when all items are selected?

After implementing the material ui select feature, I observed that when all items are selected, closed, and then reopened, the scroll position is automatically moved to the end. Is there a way to prevent this and keep it at the top? Current display: http ...

javascriptreactjsdommaterial-ui

Getting Errors When Retrieving Data with Apostrophe Symbol ' in Node.js

I am currently developing a Next.js API page to extract data from a series of URLs. Interestingly, the URLs containing an apostrophe character ' fail to return any data, while those without it work perfectly fine. Surprisingly, when I execute the same ...

javascriptnode.jsnext.jsfetch

Having trouble with Gatsby: page not showing when passing parameters in URL [Need assistance]?

Having trouble extracting the URL parameter (/mypage/?title=my-title) from the URL and displaying it on the page. I've attempted client-only routes in Gatsby. import path from "path" exports.onCreatePage = ({ page, actions }) => { const ...

reactjsroutesgatsbyserver-side-renderingreach-router

The user can witness the appearance of a scrollbar when utilizing the

Struggling to remove the scroll bar from my ion-scroll. Have tried various methods but nothing seems to work. Need assistance with this, please! Attempted using all attributes and even used CSS like ::-webkit-scrollbar with display: none;, which hides it ...

htmlcssionic-frameworkionic3

Is it possible to use CSS to create a gap between the cursor and the placeholder text within an input field?

Could you please assist me with a bug I have encountered on an older version of Firefox for OSX (37.0.2)? I have included a screenshot of the issue here: Is there a way to use css to move the first character of the placeholder text away from where the cur ...

javascriptjqueryhtmlcssangularjs

Enhance the appearance of the input range by styling it with an additional class both before and

I have a JSF page where I am using an input range element. I want to add a different style class before and after the input range. Specifically, I want to display a plus icon (ui-icon-plusthick) before the input and a minus icon (ui-icon-minus) after the i ...

htmlcss

Utilize the onClick Event to Trigger Function with an Array in ReactJS

Every time I attempt to pass an array as a value to a function by clicking on a div, I encounter the error below: Uncaught Invariant Violation: Expected onClick listener to be a function, instead got a value of object type. If passing an array to a fun ...

javascriptreactjs

Encountering a problem with the persistent JavaScript script

I have implemented a plugin/code from on my website: Upon visiting my website and scrolling down, you will notice that the right hand sidebar also scrolls seamlessly. However, when at the top of the screen, clicking on any links becomes impossible unless ...

javascripthtmlcss

Ensure that the heights of columns in UL CSS are aligned regardless of the number of lines they contain

In my current project, I am using CSS columns to establish a two-column layout for an unordered list. Here is the code snippet: HTML <div class="meta-data"> <ul> <li><i class="fa fa-chevron-right fa-xs"></i><str ...

htmlcsshtml-lists