unable to load background image on body using webpack 4 in reactjs
up vote
0
down vote
favorite
in my react js app I want to add the background image on the body.it is working fine when I'm doing in development mode but when comes to production it is not working.
for production, I'm using dist separate folder may it is creating some path issue.
here my scss
body {
font-family: Helvetica,Arial,sans-serif;
font-size: $m-size;
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-image: url(/images/bg4.png);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top;
background-size:cover;
}
my webpack.config
module.exports = {
entry:{
vendor: VENDOR_LIBS,
main: './src/app.js',
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js',
publicPath: '/',
},
devtool: 'source-map',
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{ test: /.bundle.js$/, use: { loader: 'bundle-loader', options: {lazy: true} } },
{
test: /.s?css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader?url=false',
options: {
sourceMap: true,
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
},{
test: /.(gif|svg|jpg|png|ttf|eot|woff(2)?)(?[a-z0-9=&.]+)?$/,
loader: "file-loader?name=[name].[ext]",
}
]
},
plugins: [
new CleanWebpackPlugin('dist', {} ),
new MiniCssExtractPlugin({
filename: 'style.[contenthash].css',
}),
new HtmlWebpackPlugin({
inject: true,
hash: true,
template: './src/index.html',
filename: 'index.html',
favicon: './public/images/fav.ico'
}),
new WebpackMd5Hash(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
],
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: 'vendor',
chunks: 'all',
minChunks: 2
},
}
},
runtimeChunk: true,
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true,
uglifyOptions: {
compress: {
inline: false
}
}
}),
new OptimizeCSSAssetsPlugin({})
],
},
};
webpack generating other images into base64 but not for this image.and it is not available in dist folder.
can any one help me out, i searched lot of questions but couldn't solve.
i don't want any external link to load image.
reactjs webpack sass webpack-4 webpack-style-loader
asked Nov 19 at 20:11
Abdulla Zulqarnain
708
add a comment |
up vote
0
down vote
favorite
in my react js app I want to add the background image on the body.it is working fine when I'm doing in development mode but when comes to production it is not working.
for production, I'm using dist separate folder may it is creating some path issue.
here my scss
body {
font-family: Helvetica,Arial,sans-serif;
font-size: $m-size;
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-image: url(/images/bg4.png);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top;
background-size:cover;
}
my webpack.config
module.exports = {
entry:{
vendor: VENDOR_LIBS,
main: './src/app.js',
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js',
publicPath: '/',
},
devtool: 'source-map',
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{ test: /.bundle.js$/, use: { loader: 'bundle-loader', options: {lazy: true} } },
{
test: /.s?css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader?url=false',
options: {
sourceMap: true,
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
},{
test: /.(gif|svg|jpg|png|ttf|eot|woff(2)?)(?[a-z0-9=&.]+)?$/,
loader: "file-loader?name=[name].[ext]",
}
]
},
plugins: [
new CleanWebpackPlugin('dist', {} ),
new MiniCssExtractPlugin({
filename: 'style.[contenthash].css',
}),
new HtmlWebpackPlugin({
inject: true,
hash: true,
template: './src/index.html',
filename: 'index.html',
favicon: './public/images/fav.ico'
}),
new WebpackMd5Hash(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
],
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: 'vendor',
chunks: 'all',
minChunks: 2
},
}
},
runtimeChunk: true,
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true,
uglifyOptions: {
compress: {
inline: false
}
}
}),
new OptimizeCSSAssetsPlugin({})
],
},
};
webpack generating other images into base64 but not for this image.and it is not available in dist folder.
can any one help me out, i searched lot of questions but couldn't solve.
i don't want any external link to load image.
reactjs webpack sass webpack-4 webpack-style-loader
asked Nov 19 at 20:11
Abdulla Zulqarnain
708
After you build and your dist folder is created, can you create dist/images/bg4.png then only run your server and see if it finds the image? if so, i can tell you a more permanent solution
– Shawn Andrews
Nov 19 at 20:40
i'm unable to createdist/images/bg4.pngbut other images in the appilcation generating and working fine......
– Abdulla Zulqarnain
Nov 20 at 6:05
I dont understand. You cant go into the dist folder, create a folder named images, then copy bg4.png into to test it? Also other relative image paths work in productive, or just in development?
– Shawn Andrews
Nov 20 at 18:20
@ShawnAndrews yeah after creating and pasting image it is working fine but every time clean that folder whenever i need to build new production code.
– Abdulla Zulqarnain
Nov 22 at 21:31
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
in my react js app I want to add the background image on the body.it is working fine when I'm doing in development mode but when comes to production it is not working.
for production, I'm using dist separate folder may it is creating some path issue.
here my scss
body {
font-family: Helvetica,Arial,sans-serif;
font-size: $m-size;
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-image: url(/images/bg4.png);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top;
background-size:cover;
}
my webpack.config
module.exports = {
entry:{
vendor: VENDOR_LIBS,
main: './src/app.js',
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js',
publicPath: '/',
},
devtool: 'source-map',
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{ test: /.bundle.js$/, use: { loader: 'bundle-loader', options: {lazy: true} } },
{
test: /.s?css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader?url=false',
options: {
sourceMap: true,
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
},{
test: /.(gif|svg|jpg|png|ttf|eot|woff(2)?)(?[a-z0-9=&.]+)?$/,
loader: "file-loader?name=[name].[ext]",
}
]
},
plugins: [
new CleanWebpackPlugin('dist', {} ),
new MiniCssExtractPlugin({
filename: 'style.[contenthash].css',
}),
new HtmlWebpackPlugin({
inject: true,
hash: true,
template: './src/index.html',
filename: 'index.html',
favicon: './public/images/fav.ico'
}),
new WebpackMd5Hash(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
],
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: 'vendor',
chunks: 'all',
minChunks: 2
},
}
},
runtimeChunk: true,
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true,
uglifyOptions: {
compress: {
inline: false
}
}
}),
new OptimizeCSSAssetsPlugin({})
],
},
};
webpack generating other images into base64 but not for this image.and it is not available in dist folder.
can any one help me out, i searched lot of questions but couldn't solve.
i don't want any external link to load image.
reactjs webpack sass webpack-4 webpack-style-loader
asked Nov 19 at 20:11
Abdulla Zulqarnain
708
in my react js app I want to add the background image on the body.it is working fine when I'm doing in development mode but when comes to production it is not working.
for production, I'm using dist separate folder may it is creating some path issue.
here my scss
body {
font-family: Helvetica,Arial,sans-serif;
font-size: $m-size;
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-image: url(/images/bg4.png);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top;
background-size:cover;
}
my webpack.config
module.exports = {
entry:{
vendor: VENDOR_LIBS,
main: './src/app.js',
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js',
publicPath: '/',
},
devtool: 'source-map',
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{ test: /.bundle.js$/, use: { loader: 'bundle-loader', options: {lazy: true} } },
{
test: /.s?css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader?url=false',
options: {
sourceMap: true,
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
},{
test: /.(gif|svg|jpg|png|ttf|eot|woff(2)?)(?[a-z0-9=&.]+)?$/,
loader: "file-loader?name=[name].[ext]",
}
]
},
plugins: [
new CleanWebpackPlugin('dist', {} ),
new MiniCssExtractPlugin({
filename: 'style.[contenthash].css',
}),
new HtmlWebpackPlugin({
inject: true,
hash: true,
template: './src/index.html',
filename: 'index.html',
favicon: './public/images/fav.ico'
}),
new WebpackMd5Hash(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
],
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: 'vendor',
chunks: 'all',
minChunks: 2
},
}
},
runtimeChunk: true,
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true,
uglifyOptions: {
compress: {
inline: false
}
}
}),
new OptimizeCSSAssetsPlugin({})
],
},
};
webpack generating other images into base64 but not for this image.and it is not available in dist folder.
can any one help me out, i searched lot of questions but couldn't solve.
i don't want any external link to load image.
reactjs webpack sass webpack-4 webpack-style-loader
reactjs webpack sass webpack-4 webpack-style-loader
asked Nov 19 at 20:11
Abdulla Zulqarnain
708
asked Nov 19 at 20:11
Abdulla Zulqarnain
708
asked Nov 19 at 20:11
Abdulla Zulqarnain
708
asked Nov 19 at 20:11
Abdulla Zulqarnain
708
asked Nov 19 at 20:11
Abdulla Zulqarnain
708
708
After you build and your dist folder is created, can you create dist/images/bg4.png then only run your server and see if it finds the image? if so, i can tell you a more permanent solution
– Shawn Andrews
Nov 19 at 20:40
i'm unable to createdist/images/bg4.pngbut other images in the appilcation generating and working fine......
– Abdulla Zulqarnain
Nov 20 at 6:05
I dont understand. You cant go into the dist folder, create a folder named images, then copy bg4.png into to test it? Also other relative image paths work in productive, or just in development?
– Shawn Andrews
Nov 20 at 18:20
@ShawnAndrews yeah after creating and pasting image it is working fine but every time clean that folder whenever i need to build new production code.
– Abdulla Zulqarnain
Nov 22 at 21:31
add a comment |
After you build and your dist folder is created, can you create dist/images/bg4.png then only run your server and see if it finds the image? if so, i can tell you a more permanent solution
– Shawn Andrews
Nov 19 at 20:40
i'm unable to createdist/images/bg4.pngbut other images in the appilcation generating and working fine......
– Abdulla Zulqarnain
Nov 20 at 6:05
I dont understand. You cant go into the dist folder, create a folder named images, then copy bg4.png into to test it? Also other relative image paths work in productive, or just in development?
– Shawn Andrews
Nov 20 at 18:20
@ShawnAndrews yeah after creating and pasting image it is working fine but every time clean that folder whenever i need to build new production code.
– Abdulla Zulqarnain
Nov 22 at 21:31
After you build and your dist folder is created, can you create dist/images/bg4.png then only run your server and see if it finds the image? if so, i can tell you a more permanent solution
– Shawn Andrews
Nov 19 at 20:40
After you build and your dist folder is created, can you create dist/images/bg4.png then only run your server and see if it finds the image? if so, i can tell you a more permanent solution
– Shawn Andrews
Nov 19 at 20:40
i'm unable to create
dist/images/bg4.png but other images in the appilcation generating and working fine......– Abdulla Zulqarnain
Nov 20 at 6:05
i'm unable to create
dist/images/bg4.png but other images in the appilcation generating and working fine......– Abdulla Zulqarnain
Nov 20 at 6:05
I dont understand. You cant go into the dist folder, create a folder named images, then copy bg4.png into to test it? Also other relative image paths work in productive, or just in development?
– Shawn Andrews
Nov 20 at 18:20
I dont understand. You cant go into the dist folder, create a folder named images, then copy bg4.png into to test it? Also other relative image paths work in productive, or just in development?
– Shawn Andrews
Nov 20 at 18:20
@ShawnAndrews yeah after creating and pasting image it is working fine but every time clean that folder whenever i need to build new production code.
– Abdulla Zulqarnain
Nov 22 at 21:31
@ShawnAndrews yeah after creating and pasting image it is working fine but every time clean that folder whenever i need to build new production code.
– Abdulla Zulqarnain
Nov 22 at 21:31
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
In production your current directory will change to /dist/index.html so thats why the path you used for development /images/bg4.png can't find the file.
The solution is to copy your static image files, like your background, into the /dist folder in the build process.
Assuming your project directory is similar to the following:
...
/images/bg4.png
package.json
Then add these commands to your webpack build script to copy the images into your production directory /dist.
// in package.json
"scripts": {
...
"build": "...your webpack build commands... && cp -a images\. dist\images",
...
},
Your new file directories will look like
/dist/...your index.html, bundles, etc...
/images/bg4.png
/images/bg4.png
package.json
and your image path should find the image file now.
answered Nov 22 at 22:17
Shawn Andrews
930416
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
In production your current directory will change to /dist/index.html so thats why the path you used for development /images/bg4.png can't find the file.
The solution is to copy your static image files, like your background, into the /dist folder in the build process.
Assuming your project directory is similar to the following:
...
/images/bg4.png
package.json
Then add these commands to your webpack build script to copy the images into your production directory /dist.
// in package.json
"scripts": {
...
"build": "...your webpack build commands... && cp -a images\. dist\images",
...
},
Your new file directories will look like
/dist/...your index.html, bundles, etc...
/images/bg4.png
/images/bg4.png
package.json
and your image path should find the image file now.
answered Nov 22 at 22:17
Shawn Andrews
930416
add a comment |
up vote
0
down vote
In production your current directory will change to /dist/index.html so thats why the path you used for development /images/bg4.png can't find the file.
The solution is to copy your static image files, like your background, into the /dist folder in the build process.
Assuming your project directory is similar to the following:
...
/images/bg4.png
package.json
Then add these commands to your webpack build script to copy the images into your production directory /dist.
// in package.json
"scripts": {
...
"build": "...your webpack build commands... && cp -a images\. dist\images",
...
},
Your new file directories will look like
/dist/...your index.html, bundles, etc...
/images/bg4.png
/images/bg4.png
package.json
and your image path should find the image file now.
answered Nov 22 at 22:17
Shawn Andrews
930416
add a comment |
up vote
0
down vote
up vote
0
down vote
In production your current directory will change to /dist/index.html so thats why the path you used for development /images/bg4.png can't find the file.
The solution is to copy your static image files, like your background, into the /dist folder in the build process.
Assuming your project directory is similar to the following:
...
/images/bg4.png
package.json
Then add these commands to your webpack build script to copy the images into your production directory /dist.
// in package.json
"scripts": {
...
"build": "...your webpack build commands... && cp -a images\. dist\images",
...
},
Your new file directories will look like
/dist/...your index.html, bundles, etc...
/images/bg4.png
/images/bg4.png
package.json
and your image path should find the image file now.
answered Nov 22 at 22:17
Shawn Andrews
930416
In production your current directory will change to /dist/index.html so thats why the path you used for development /images/bg4.png can't find the file.
The solution is to copy your static image files, like your background, into the /dist folder in the build process.
Assuming your project directory is similar to the following:
...
/images/bg4.png
package.json
Then add these commands to your webpack build script to copy the images into your production directory /dist.
// in package.json
"scripts": {
...
"build": "...your webpack build commands... && cp -a images\. dist\images",
...
},
Your new file directories will look like
/dist/...your index.html, bundles, etc...
/images/bg4.png
/images/bg4.png
package.json
and your image path should find the image file now.
answered Nov 22 at 22:17
Shawn Andrews
930416
answered Nov 22 at 22:17
Shawn Andrews
930416
answered Nov 22 at 22:17
Shawn Andrews
930416
answered Nov 22 at 22:17
Shawn Andrews
930416
930416
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53381940%2funable-to-load-background-image-on-body-using-webpack-4-in-reactjs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
After you build and your dist folder is created, can you create dist/images/bg4.png then only run your server and see if it finds the image? if so, i can tell you a more permanent solution
– Shawn Andrews
Nov 19 at 20:40
i'm unable to create
dist/images/bg4.pngbut other images in the appilcation generating and working fine......– Abdulla Zulqarnain
Nov 20 at 6:05
I dont understand. You cant go into the dist folder, create a folder named images, then copy bg4.png into to test it? Also other relative image paths work in productive, or just in development?
– Shawn Andrews
Nov 20 at 18:20
@ShawnAndrews yeah after creating and pasting image it is working fine but every time clean that folder whenever i need to build new production code.
– Abdulla Zulqarnain
Nov 22 at 21:31