Recently, I dove into a project utilizing react with webpack, and everything was smooth sailing until I encountered the CSS hurdle. Despite successfully configuring webpack, trouble brewed when it came to styling. Specifically, setting the background image of a div proved to be problematic in Chromium and Chrome browsers - the image simply refused to load. Strangely enough, Mozilla Firefox had no issues loading the image. I went as far as uninstalling and reinstalling Chromium, clearing browsing data, but alas, the problem persisted.
My code snippets:
Here is the CSS snippet causing the issue:
.full-div {
background: url("../img/slides/slide-1.jpg") center center fixed no-repeat;
height: 100vh;
width: 100vw;
}
And here are my React components:
import React, { Component } from 'react';
import customMsg from '../utils/customMessages';
class HomePage extends Component {
constructor() {
super();
this.state = {};
}
render() {
const { welcomeMessage } = customMsg;
return (
<div className="full-div">
<h1>{welcomeMessage}</h1>
<img alt="foto1" src="../assets/img/slides/slide-2.jpeg" />
</div>
);
}
}
export default HomePage;
The challenge persists as setting the background image using CSS3 in Chrome seems futile, along with loading images using
<img alt="foto1" src="../assets/img/slides/slide-2.jpeg" />Below is an excerpt of my webpack configuration:
// webpack config goes here
Despite resetting the project with create-react-app, the issue remains unresolved. This suggests that there might not be any setup errors on my end. Could the browser itself be the culprit? Does anyone have insights on this matter, or should I consider raising an issue on the official react repository for assistance?
I stumbled upon a similar question on StackOverflow titled CSS working in Firefox but not Chrome, but unfortunately, it did not provide a solution applicable to my scenario.