Optimisation not working in background image

[dpkpaa]

For external and inline css background image url not optimizing

[mercteil]

I use SCSS & next-sass package .... url('....jpg') does not get into my dist folder

[mercteil]

Not a pretty workaround is to inline style the background...
I only did not figure out how to serve webp and fallback to jpg if needed, so I just server jpg

import img from './somewhere.jpg';

const Component = () => {
...
 return {
   <div styles={{ backgroundImage: `url(${img})`}} />
 }
}

[judwhite]

I'm getting a link to bg-calculate.6decbc4e1de7c6b0bdbce85c6adbae41.png, for example. The contents of that file are text:

» cat bg-calculate.6decbc4e1de7c6b0bdbce85c6adbae41.png
module.exports = "/_next/static/images/bg-calculate-c0250b7962ac1c5eebe5083071273657.png";

The file referenced by the module.exports contains the actual image.

I see the same behavior with next, next build, and next export.

[stephankaag]

I ran into this issue as well. Any idea @cyrilwanner?

[mpetricek]

I tried this and it seems to work

<div style={{backgroundImage:`url(${require(`../assets${slide.img}`)})`}} />

[jamesryan-dev]

I've run into this error also - will attempt this solution

-> can confirm @mpetricek 's solution works :D

[edgardz]

I'm getting a link to bg-calculate.6decbc4e1de7c6b0bdbce85c6adbae41.png, for example. The contents of that file are text:

» cat bg-calculate.6decbc4e1de7c6b0bdbce85c6adbae41.png
module.exports = "/_next/static/images/bg-calculate-c0250b7962ac1c5eebe5083071273657.png";

The file referenced by the module.exports contains the actual image.

I see the same behavior with next, next build, and next export.

I'm having the exact same issue, which prevents me from using background images on pseudo-elements (before, after), for instance.

[edgardz]

Temporarily fixed on my project by adding this to next.config.js

... 

const optimizedImagesCSSFix = (nextConfig = {}) => {
  return Object.assign({}, nextConfig, {
    webpack(config, options) {
      if (config.module.rules) {
        config.module.rules.forEach((rule) => {
          if (rule.oneOf) {
            rule.oneOf.forEach((subRule) => {
              if (subRule.type && subRule.type === 'asset/resource' && subRule.exclude) {
                subRule.exclude.push(/\.(jpg|jpeg|png|svg|webp|gif|ico)$/);
              } else if (
                subRule.issuer &&
                !subRule.test &&
                !subRule.include &&
                subRule.exclude &&
                subRule.use &&
                subRule.use.options &&
                subRule.use?.options?.name
              ) {
                if (
                  String(subRule.issuer).includes('/\\.(css|scss|sass)(\\.webpack\\[javascript\\/auto\\])?$/') &&
                  subRule.use.options.name.startsWith('static/media/')
                ) {
                  subRule.exclude.push(/\.(jpg|jpeg|png|svg|webp|gif|ico)$/);
                }
              }
            });
          }
        });
      }
      if (typeof nextConfig.webpack === 'function') return nextConfig.webpack(config, options);
      return config;
    }
  });
};

const nextPlugins = [[optimizedImages, optimizedImagesConfig], optimizedImagesCSSFix];

...