I'm attempting to get to a static picture to use inside an inline background picture property inside React. Sadly, I've run up dry on the best way to do this.
Usually, I thought you just did as follows:
import Background from '../images/background_image.png';
var sectionStyle = {
width: "100%",
height: "400px",
backgroundImage: "url(" + { Background } + ")"
};
class Section extends Component {
render() {
return (
<section style={ sectionStyle }>
</section>
);
}
}
This works for
<img>
tags. Can anyone describe the difference between the two?
Example:
<img src={ Background } />
works just fine.