I'm facing an issue where I can't seem to get the image to display as a background. If I just attach the image directly, it shows up without any problems. However, my intention is to make it a background image so that I can overlay text on top of it.
Every time I try setting it as a background image, the image fails to load despite enlarging the parent div and confirming the expansion in web-dev-middleware.
import React from 'react';
import { Jumbotron } from 'react-bootstrap';
import JumboImage from '../../css/images/homePagePicJumbo.jpg';
const styles = {
homepage: {
height: 500,
width: 'auto',
},
image: {
backgroundimage: JumboImage,
},
};
export default function HomePage() {
return (
<Jumbotron id="HomePageJumbotron" style={styles.homepage}>
<div style={styles.image}>Hello world</div>
</Jumbotron>
);const webpack = require('webpack');
const { resolve } = require('path');
const jsOutput = {
filename: 'build.js',
path: resolve(__dirname),
publicPath: '/',
};
module.exports = {
mode: 'development',
// specify entry point
context: resolve(__dirname, 'src'),
// define main page for entry
entry: [
'webpack-hot-middleware/client',
'./index.jsx',
],
// specify output location for bundle file
output: jsOutput,
// configure babel loader for transpiling JS/JSX files
module: {
// multiple rules for loaders
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components|public\/)/,
loader: 'babel-loader',
},
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components|public\/)/,
loader: 'babel-loader',
},
{
test: /\.scss$/,
exclude: /(node_modules|bower_components|public\/)/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader',
}, {
loader: 'sass-loader',
}],
},
{
test: /\.(png|jpg|)$/,
loader: 'url-loader',
options: {
fallback: 'file-loader',
},
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
],
};