ReactJS app can't load background image

Question

I rarely find a problem that I can't already find an answer to, but this time I'm really stumped - and I'm sorry in advance if my question will prove silly or trivial.

I'm building a simple React app, and I'm supposed to give the Home component a background image, which is an .svg file. However, the image does not load - dev tools Network section says it could not load the image - but it does show up there, with a hashed filename, so I'm guessing the file-loader works. I'm also using react-css-modules. I've tried a couple approaches:

React Component v.1

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's the CSS Module:

.homeBg {
    background-image: url(../images/pattern.svg)
}
...

And my Webpack config:

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'}
]

Here's the second approach I tried in the component:

render() {
const bgImg = require('../images/pattern.svg')

const background = {
  backgroundImage: 'url(' + bgImg + ')'
}

return (
  <div className='homeContainer' style={background}>
...

But whetever I do - the image does not load. It loads in a regular <img> tag, but not as a background. What else could I try? Thanks in advance for any suggestions!

score 0 · Answer 1 · answered Jun 28 '16 at 02:14

Can you try, in the second example

render() {
  const bgImgUrl = // Insert the url for your image here

  const background = {
    backgroundImage: 'url(' + bgImgUrl + ')';
  }

  ...
}

instead of using the require? Per https://facebook.github.io/react/tips/inline-styles.html it would seem that it needs an actual url to do this.

yiye · Answer 2 · 2017-05-23T02:29:38.063

Maybe, you have to know what file-loader did with your svg。In your second approach file-loader do thire things:

change ../images/pattern to hash and make it to be a module only return a svg path, like this:

function(module, exports, webpack_require) {
```
module.exports = __webpack_require__.p + "32aa2ecb4810e9d55a3b870c0eab59eb.svg";
```
}
copy your svg file to output folder

To solve your problem , I think you can look thought output file, to find out what happen to your svg。

you can find this in the doc of file-loade

score 0 · Answer 3 · answered Jun 28 '16 at 15:05

0

Thanks for all the suggestions, but just as I expected, it turned out to be a silly thing regarding Bootstrap and some bad markup structuring...

answered Jun 28 '16 at 15:05

Radosław Wieczorek

15
1
4

score 0 · Answer 4 · answered Aug 21 '17 at 13:22

I would do it by doing

import img from 'imageURL'

a bit like you would if it was a npm module

then doing

state = {
      img1: img
}

render(){

    const imgSize = { width: 100vw, height: 100vh }

    return(

        <div><img src={this.state.img1} style={imgSize}/></div>

    )
}

ReactJS app can't load background image

4 Answers4