CSS Background-image: url('foo'); not displaying after deploying my node.js app

16 Views Asked by At

I created a simple threejs website. When run it local the image displays correctly,

After running 'npm run build' and deploying the website, the image does not display and no error in the console.

I have this CSS

    body
        {
            background: url("/static/assets/images/bg-02.png") no-repeat center center fixed;
            background-size: cover;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
        }

And i have this in my webpack conf. to include images and CSS, note that {...} excludes unnecessary code

    module.exports = {
    
    {...}
        
        module:
        {
            rules:
            [
    
    {...}
                // CSS
                {
                    test: /\.css$/,
                    use:
                    [
                        MiniCSSExtractPlugin.loader,
                        'css-loader'
                    ]
                },
    
                // Images
                {
                    test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/,
                    use:
                    [
                        {
                            loader: 'file-loader',
                            options:
                            {
                                outputPath: '/assets/images/'
                            }
                        }
                    ]
                },
    
    {...}
    
            ]
        }
    }

This is my folder structure: enter image description here

When I build, I get this report:

Assets: /assets/images/165a645f56336a3f27642b6a2228aa5b.png (2.34 MiB) assets/3D/zClub.glb (1.59 MiB) assets/3D/zzz_in.glb (4.69 MiB) assets/images/bg-02.png (2.34 MiB) assets/images/bg-03.png (516 KiB) bundle.0555c83830092e4786e0.js (571 KiB)

the '165a645f56336a3f27642b6a2228aa5b.png' was exported it seems from the webpack.

In the Dev tools on local, I do get an Assets/image/ directory, but once deployed, it is not there anymore.

Im a begginer with NPM

I can provide more details if needed. Also, this is the current online website:

https://zzzzzz.club

0

There are 0 best solutions below