CODEWITHSUNDEEP
cssimageexpresswebpack
user6467981
user6467981

Reputation:

CSS Background image not loading with webpack

I've read through almost all of the posts here about CSS background images not loading, and I'm convinced I have (yet another) special case.

I've set up my webpack configuration like so (just the relevant parts):

   {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
          }
        ]
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [
          {
            loader: 'file-loader',
          }
        ]
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [
          {
            loader: 'url-loader',
          }
        ]
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          },
          {
            loader: "less-loader",
            options: {
              includePaths: [
                path.resolve(__dirname, "assets", "less")
              ]
            },
          }
        ],
        exclude: /node_modules/
      }

I have my public path set as follows:

 output: {
    path: path.resolve(__dirname, "public"),
    filename: "bundle.js",
    publicPath: "public/"
  },

When I build the webpack file everything gets moved to my /public directory just fine and my styles are rewritten properly. I can even manually find the image that is not loading in the public directory. However, this style is goofed up:

.section-intro {
    background: url(public/76d7fa525cc5b3d641b9f774b7a79c92.png) center center no-repeat;
    background-size: cover;
}

I thought maybe it wasn't getting set correctly, however hovering over the style in chrome seems to imply it is working - it shows localhost:8080/public/76d7fa525cc5b3d641b9f774b7a79c92.png.

Other things, such as fonts seem to load correctly. However, I did notice that manually going to localhost:8080/public/76d7fa525cc5b3d641b9f774b7a79c92.png gives me a 404. Which I find weird.

In my express server I have the following line:

this.app.use(express.static(path.resolve(__dirname, "..", "public")));

which should allow me to see the images, right?

I'm not sure if this is on the express side, or the webpack side, but it is causing me to pull my hair out. I hope someone can help.

Thank you!

Upvotes: 1

Views: 183

Answers (1)

user6467981
user6467981

Reputation:

I don't want to call this a fix, so I won't mark my own answer correct until someone else can confirm.

However, changing file-loader to url-loader for the png matcher fixed. It, I don't think this fully fixes the problem though. The only difference is url-loader can pass a data URL if the file is small enough. Chances are my images are small enough to make this a "fix", but if I put a larger image in I'm sure it'll break again.

I'd love to see a more complete solution.

Upvotes: 1

Related Questions