Usually, I have no trouble finding solutions to my problems, but this time I'm really stuck - and I apologize in advance if my question seems silly or trivial.
I am currently working on a simple React app where I need to set a background image for the Home component using an .svg file. However, despite setting everything up correctly, the image fails to load. The dev tools Network section indicates that it could not load the image, even though the hashed filename does appear there, suggesting that the file-loader is functioning properly. I am also utilizing react-css-modules. I've attempted a few different strategies:
First React Component
import React from 'react'
import CSSModules from 'react-css-modules'
import styles from '../styles/home.css'
class Home extends React.Component {
render() {
return (
<div className='homeContainer' styleName='homeBg'>
<div className='col-sm-12 text-center'>
<div className="jumbotron col-sm-6 col-sm-offset-3" styleName='transparentBg'>
<h1>Enter Your Location</h1>
<form>
<div className="form-group">
<input type="text" className="form-control" placeholder='Location...' />
</div>
<div className="form-group">
<button className='btn btn-lg btn-submit btn-success' type="submit">Continue</button>
</div>
</form>
</div>
</div>
</div>
);
}
}
export default CSSModules(Home, styles)
Here is the CSS Module used:
.homeBg {
background-image: url(../images/pattern.svg)
}
...
And here is my Webpack configuration:
loaders: [
{test: /\.js$/, exclude: '/node_modules/', loader: 'babel-loader'},
{test: /\.css$/,
loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
]
},
{test: \.svg\$, loader: 'file-loader'}
]
I also tried another approach within the component:
render() {
const bgImg = require('../images/pattern.svg')
const background = {
backgroundImage: 'url(' + bgImg + ')'
}
return (
<div className='homeContainer' style={background}>
...
Despite trying both methods, the image still refuses to load as a background, although it loads perfectly fine when placed in a regular <img> tag. Is there anything else I can attempt? Any suggestions would be greatly appreciated! Thank you in advance!