unable to load background image on body using webpack 4 in reactjs
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 '18 at 20:11
Abdulla ZulqarnainAbdulla Zulqarnain
849
add a comment |
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 '18 at 20:11
Abdulla ZulqarnainAbdulla Zulqarnain
849
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 '18 at 20:40
i'm unable to createdist/images/bg4.pngbut other images in the appilcation generating and working fine......
– Abdulla Zulqarnain
Nov 20 '18 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 '18 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 '18 at 21:31
add a comment |
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 '18 at 20:11
Abdulla ZulqarnainAbdulla Zulqarnain
849
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 '18 at 20:11
Abdulla ZulqarnainAbdulla Zulqarnain
849
asked Nov 19 '18 at 20:11
Abdulla ZulqarnainAbdulla Zulqarnain
849
asked Nov 19 '18 at 20:11
Abdulla ZulqarnainAbdulla Zulqarnain
849
asked Nov 19 '18 at 20:11
Abdulla ZulqarnainAbdulla Zulqarnain
849
asked Nov 19 '18 at 20:11
Abdulla ZulqarnainAbdulla Zulqarnain
849
849
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 '18 at 20:40
i'm unable to createdist/images/bg4.pngbut other images in the appilcation generating and working fine......
– Abdulla Zulqarnain
Nov 20 '18 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 '18 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 '18 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 '18 at 20:40
i'm unable to createdist/images/bg4.pngbut other images in the appilcation generating and working fine......
– Abdulla Zulqarnain
Nov 20 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 at 21:31
add a comment |
1 Answer
1
active
oldest
votes
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 '18 at 22:17
Shawn AndrewsShawn Andrews
965617
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 '18 at 22:17
Shawn AndrewsShawn Andrews
965617
add a comment |
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 '18 at 22:17
Shawn AndrewsShawn Andrews
965617
add a comment |
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 '18 at 22:17
Shawn AndrewsShawn Andrews
965617
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 '18 at 22:17
Shawn AndrewsShawn Andrews
965617
answered Nov 22 '18 at 22:17
Shawn AndrewsShawn Andrews
965617
answered Nov 22 '18 at 22:17
Shawn AndrewsShawn Andrews
965617
answered Nov 22 '18 at 22:17
Shawn AndrewsShawn Andrews
965617
965617
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.
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 '18 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 '18 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 '18 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 '18 at 21:31