2

I'm trying to load css background images with webpack but when compiling I've got this:

background:url([object Module])

These are parts webpack.config.js

.setOutputPath('public/build/')
.setPublicPath('/build')

I'm using file loader as I find in some posts and esModule to trying object module issue:

.addLoader({
    test: /\.(png|jpg|jpeg|gif|ico|svg|htc)$/i,
    use: [
        {
            loader: 'file-loader',
            options: {
                esModule: false,
            },
        }
    ]
})

Here is my custom *.js with *.css requires inside

.addEntry('home', './assets/js/home.js')

When launching yarn encore dev all files are copied to my public/build/ folder and home.css file is generated. When open I can see the first line issue mentioned (.header h1{ background:url([object Module]); display:block; float:left; width:150px; height:50px;})

Furthermore, for some reason, when checking diles copied to build directory a kind of hash is between file name and extension. I don't know if this could be afecting.

enter image description here

Makros
  • 352
  • 2
  • 21
  • 1
    Does this answer your question? [Webpack - background images not loading](https://stackoverflow.com/questions/37288886/webpack-background-images-not-loading) – Tanvir Islam Streame Dec 28 '19 at 09:17
  • Removing sourcemap fix the second issue (name with hash) but still failing background:url([object Module]) problem. – Makros Dec 28 '19 at 09:25
  • Is there a benefit in defining your custom loader? When I use webpack encore, I let it handle images for me and it works well. To do this, you have to put the images needed, in your css for example, in your assets folder and use a relative path in your css to your images. See https://symfony.com/doc/current/frontend/encore/copy-files.html for more details – Florian Hermann Dec 28 '19 at 21:09
  • Thanks for your reply. The reason of all of this is because I've got 3 different CSS files and I'm using on front depending on a variable. Will check your solution as soon as possible. – Makros Dec 28 '19 at 21:38
  • @FlorianHermann still having background:url([object Module]) when compiling. I've removed custom loader for png images and set copyFiles to copy from assets folder to public folder. Compiled CSS still having background:url([object Module]) =( – Makros Dec 29 '19 at 10:11
  • I should have precised that the solution is in the first part of this documentation page under the title "Referencing Images from Inside a Webpacked JavaScript File". Read all of this part and this should help you hopefully. You don't need neither to set copyFiles parts. What I useally do is to put images (and fonts) in need in my css in the assets folder and images in need my twig directly in the public directory. – Florian Hermann Dec 29 '19 at 19:09
  • Morevoer, it could be great if you complete our question with a screen of your assets folder and an example of your css with the url() part to show what is wrong exactly. – Florian Hermann Dec 29 '19 at 23:43

0 Answers0