0

Images current show up like this. Looking at the image source, it shows up as <img class="blur flex-shrink-0 mb-0 mr-3 rounded-full w-14 h-14 lazyloaded" alt="Profile" src="[object Object]"> Without using .default as shown below, the src would be [object Module]

I am using next.js 12 (but the same issues happen on 11).

I am loading the images like this (Both the commented and uncommented result in the same):

      <Image
        className="flex-shrink-0 mb-0 mr-3 rounded-full w-14 h-14"
        // src={require("../../../content/assets/profile.png").default}
        // webpSrc={require("../../../content/assets/profile.png?webp").default}
        // previewSrc={require("../../../content/assets/profile.png?lqip").default}
        src={require("public/profile_new.png").default}
        webpSrc={require("/public/profile_new.png?webp").default}
        previewSrc={require("/public/profile_new.png?lqip").default}
        alt="Profile"
      />

I've tried suggestions from: Webpack file-loader outputs [object Module] IMAGE: You may need an appropriate loader to handle this file type I can't reference an image in Next.js Nextjs: TypeError: unsupported file type: undefined after update to v.11

Below is my next.config.js. All the parts that have been commented out have at one point been uncommented but have yielded the same result.

const optimizedImages = require("next-optimized-images");
module.exports = optimizedImages({
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.(png|jpe?g|gif)$/i,
      use: [
        options.defaultLoaders.babel,
        {
          loader: "file-loader",
          options: {
            esModule: false,
          },
        },
      ],
    });

    return config;
  },
});

Here are my dependencies from package.json

"dependencies": {
    "clsx": "^1.1.1",
    "imagemin-mozjpeg": "^9.0.0",
    "imagemin-optipng": "^8.0.0",
    "lazysizes": "^5.3.1",
    "lqip-loader": "^2.2.1",
    "next": "^12.0.4",
    "next-compose-plugins": "^2.2.1",
    "next-optimized-images": "^2.6.2",
    "next-themes": "^0.0.14",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-markdown": "^5.0.3",
    "react-syntax-highlighter": "^15.4.3",
    "react-toggle-dark-mode": "^1.0.3",
    "remark-gfm": "^1.0.0",
    "typeface-merriweather": "^1.1.13",
    "typeface-open-sans": "^1.1.13",
    "url-loader": "^4.1.1",
    "webp-loader": "^0.6.0"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.16.4",
    "@babel/preset-react": "^7.16.0",
    "@tailwindcss/typography": "^0.4.0",
    "autoprefixer": "^10.2.5",
    "gray-matter": "^4.0.2",
    "html-webpack-plugin": "^5.5.0",
    "postcss": "^8.2.8",
    "tailwindcss": "^2.0.4"
  },

File structure: file structure

Stephie Haus
  • 1
  • 2
  • 1
    When using `src` in an image, don't `require` it. Just simply `src="../../../content/assets/profile.png"` is what you want. Anyways, don't require any `src` property. – code Nov 28 '21 at 21:41
  • @code I tried without the require, still the same issue, though in inspect element I can see how that the path is correct (with the weird .png?lqip extension which I believe is deliberate?) – Stephie Haus Nov 28 '21 at 21:44
  • [Webpack configuration](https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config) is set under the `webpack` field in `next.config.js`, not `webpackConfig`. You should also use a single `module.exports` in that file, e.g. `module.exports = optimizedImages({ webpack: (config, options) => {...} })` – juliomalves Nov 29 '21 at 00:25
  • @juliomalves I changed my next.config.js to conform but still the same issue. now I'm using: `module.exports = { webpack: (config, options) => { config.module.rules.push({ test: /\.(png|jpe?g|gif)$/i, use: [ options.defaultLoaders.babel, { loader: 'file-loader', options: { esModule: false, } }, ], }) return config }, }` – Stephie Haus Nov 29 '21 at 18:10
  • @juliomalves I have updated the post with the current next.config.js. I believe I have followed your advice. Let me know, thanks – Stephie Haus Nov 29 '21 at 18:22

0 Answers0