images not showing, src= object

[BernardA]

"next-optimized-images": "^2.6.2"

Images are not showing. The resulting HTML is like below:

    <img src="[object Module]" alt="quiamo logo" class="jss7">

Image originals are stored on /public/images as per Nextjs docs.

I run both npm run dev and npm run build with the same result.

For build I also checked on /.next/static/ and found no folder named images as I understand it should be the case.

next.config.js

    const { createSecureHeaders } = require('next-secure-headers');
    const withOptimizedImages = require('next-optimized-images');

 module.exports = withOptimizedImages({
     async headers() {
        return [{ source: '/(.*)', headers: createSecureHeaders() }];
    },
 });

On /src/components/header.js

 ....
               <Link href="/" aria-label="go to homepage">
                    <img
                        src={require('../../public/images/main-logo.png')}
                        alt="quiamo logo"
                        className={classes.branding}
                    />
                </Link>

Excerpt from package.json

    "imagemin-mozjpeg": "^9.0.0",
    "imagemin-optipng": "^8.0.0",
    "imagemin-svgo": "^8.0.0",
    "localforage": "^1.9.0",
    "mui-datatables": "^3.3.1",
    "next": "^9.5.3",
    "next-compose-plugins": "^2.2.0",
    "next-images": "^1.4.1",
    "next-optimized-images": "^2.6.2",
    "next-redux-saga": "^4.1.2",
    "next-redux-wrapper": "^6.0.2",
    "pdf-viewer-reactjs": "^2.0.7",
    "prop-types": "^15.7.2",
    "react": "16.13.1",
    "react-cookie": "^4.0.3",
    "react-device-detect": "^1.13.1",
    "react-dnd": "^11.1.3",
    "react-dom": "16.13.1",
    "react-geocode": "^0.2.1",
    "react-html-parser": "^2.0.2",
    "react-image-crop": "^8.6.4",
    "react-images": "^1.1.7",
    "react-lazyload": "^3.0.0",
    "react-paginate": "^6.3.2",
    "react-quill": "^1.3.5",
    "react-redux": "^7.2.1",
    "react-social-login": "^3.4.8",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-form": "^8.3.6",
    "redux-saga": "^1.1.3",
    "sass": "^1.26.10",
    "webp-loader": "^0.6.0"

[kovart]

I have the same issue. It seems the bug occurs only in builds of static pages. When I run dev server everything works fine.

[taisreis67]

I have exactly the same issue :(

[andreisergiu98]

Try require('image.png').default

[antheus-s]

Try require('image.png').default

This fixed all my issues, thanks!

[BernardA]

That did work. Thanks @andreisergiu98

To be clear, one needs the full path and, if you use ESLint, you have to disable global require:

     // eslint-disable-next-line global-require
     src={require('../../public/images/main-logo.png').default}

[bymoe]

Can we re-open this please? This error still happening, Adding .default does fix it for some images and broke it for some, Not sure what's happening.

[halas]

I have the same problem and although default solves it, I feel it is still a problem that needs addressing as it is not in documentation :)

[louisgv]

This seems to only happens with files that were under the inlineimagelimit threshold which get turned into a data string.

The temporary fix seems to be setting inlineimagelimit to -1 and update to 3.0 once it's stable