images that copied into the static folder(/_next/static/media/*) are damaged

[Sharklegs]

next verison: 11.1.2
next-optimized-images version: 2.6.2

images can be found in .next/static/media/ but can not preview or open, tips: it may damaged.
in server open the image in new tab, it is a white empty Square picture.
and the inlineImageLimit is 8192 by default right? but no matter how small the image is, and how big the file size I set , inline can not work, I always get copied to the static folder of next.

I change next to 10.1.3 then it perform well no such problem.

next.config.js:

const withPlugins = require('next-compose-plugins');
const optimizedImages = require('next-optimized-images');


module.exports = withPlugins(
  [optimizedImages],
  {
    reactStrictMode: true,
    webpack5: true,
  },
);

example:
there is an icon: assest/icon-tips.png

.main {
  background: url(../assets/icon-tips.png);
}

result:

.main {
  background: url(/_next/static/media/icon-tips.3d63b16b9e687dbf38305a2737e8895a.png);
}

[harig074]

Facing the same issue with Next 12.0.4

The files in the .next/static/media folder are structured like module files. e.g.

module.exports = "/_next/static/images/filename_generated_by_next_optimized_images"

[redlarva]

same issue with Next 12.0.4

[Alfie Goatcher]

Same with 12.0.7

[David de Diego]

+1

[SStoliarchuk]

After some digging I was able to create a workaround for the issue:
The file: /node_modules/next-optimized-images/lib/index.js @ line 43
Replace:

      // remove (unoptimized) builtin image processing introduced in next.js 9.2
      if (enrichedConfig.module.rules) {
        enrichedConfig.module.rules.forEach((rule) => {
          if (rule.oneOf) {
            rule.oneOf.forEach((subRule) => {
              if (
                subRule.issuer && !subRule.test && !subRule.include && subRule.exclude
                && subRule.use && subRule.use.options && subRule.use.options.name
              ) {
                if ((String(subRule.issuer.test) === '/\\.(css|scss|sass)$/' || String(subRule.issuer) === '/\\.(css|scss|sass)$/') && subRule.use.options.name.startsWith('static/media/')) {
                  subRule.exclude.push(/\.(jpg|jpeg|png|svg|webp|gif|ico)$/);
                }
              }
            });
          }
        });
      }

with

      // remove (unoptimized) builtin image processing introduced in next.js 9.2
      if (enrichedConfig.module.rules) {
        enrichedConfig.module.rules.forEach((rule) => {
          if (rule.oneOf) {
            rule.oneOf.forEach((subRule) => {
              if (
                subRule.issuer && !subRule.test && !subRule.include && subRule.exclude
                /* && subRule.use && subRule.use.options && subRule.use.options.name */
              ) {
                if ((String(subRule.issuer.test) === '/\\.(css|scss|sass)$/' || String(subRule.issuer) === '/\\.(css|scss|sass)$/')/*  && subRule.use.options.name.startsWith('static/media/') */) {
                  subRule.exclude.push(/\.(jpg|jpeg|png|svg|webp|gif|ico)$/);
                }
              }
            });
          }
        });
      }

[Michael Schramm]

same problem in nextjs 12.1 :(

[jorgev259]

@wodka For the time being @SStoliarchuk's fix worked for me, forked it on https://github.com/jorgev259/next-optimized-images

[Alex Kinnee]

+1. Had to stop using for now.

[Shinan Zheng]

After some digging I was able to create a workaround for the issue: The file: /node_modules/next-optimized-images/lib/index.js @ line 43 Replace:

      // remove (unoptimized) builtin image processing introduced in next.js 9.2
      if (enrichedConfig.module.rules) {
        enrichedConfig.module.rules.forEach((rule) => {
          if (rule.oneOf) {
            rule.oneOf.forEach((subRule) => {
              if (
                subRule.issuer && !subRule.test && !subRule.include && subRule.exclude
                && subRule.use && subRule.use.options && subRule.use.options.name
              ) {
                if ((String(subRule.issuer.test) === '/\\.(css|scss|sass)$/' || String(subRule.issuer) === '/\\.(css|scss|sass)$/') && subRule.use.options.name.startsWith('static/media/')) {
                  subRule.exclude.push(/\.(jpg|jpeg|png|svg|webp|gif|ico)$/);
                }
              }
            });
          }
        });
      }

with

      // remove (unoptimized) builtin image processing introduced in next.js 9.2
      if (enrichedConfig.module.rules) {
        enrichedConfig.module.rules.forEach((rule) => {
          if (rule.oneOf) {
            rule.oneOf.forEach((subRule) => {
              if (
                subRule.issuer && !subRule.test && !subRule.include && subRule.exclude
                /* && subRule.use && subRule.use.options && subRule.use.options.name */
              ) {
                if ((String(subRule.issuer.test) === '/\\.(css|scss|sass)$/' || String(subRule.issuer) === '/\\.(css|scss|sass)$/')/*  && subRule.use.options.name.startsWith('static/media/') */) {
                  subRule.exclude.push(/\.(jpg|jpeg|png|svg|webp|gif|ico)$/);
                }
              }
            });
          }
        });
      }

it is works