I Have stored my images in public directory and my all codes are in the src folder.

normally when i try to use importing image from src/page/page.js like: /image/logo/logo-dark.png it works but when I am importing images from src/ponent/core/BrandLogo directory it gives me:

Module not found: Can't resolve '/image/logo/logo-dark.png'

my next.config.js is :

const path = require('path')
const withImages = require('next-images')
module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'src/assets/scss')],
    eslint: {
      // Warning: Dangerously allow production builds to successfully plete even if
      // your project has ESLint errors.
      ignoreDuringBuilds: true,
    },
  },
  images: {
    loader: "imgix",
    path: "",
  }
}
module.exports = withImages({
  fileExtensions: ["jpg", "jpeg", "png", "gif"],
  webpack(config, options) {
    return config
  }
})

Component Code:

import darklogo from '/public/image/logo/logo-dark.png'
import lightLogo from '/image/logo/logo-white.png'
export default function BrandLogo({logoWhite=false,...rest}){
return(
<>
    <img src={darklogo} alt="brand logo" {...rest}/>
</>
)
}``` 

I Have stored my images in public directory and my all codes are in the src folder.

normally when i try to use importing image from src/page/page.js like: /image/logo/logo-dark.png it works but when I am importing images from src/ponent/core/BrandLogo directory it gives me:

Module not found: Can't resolve '/image/logo/logo-dark.png'

my next.config.js is :

const path = require('path')
const withImages = require('next-images')
module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'src/assets/scss')],
    eslint: {
      // Warning: Dangerously allow production builds to successfully plete even if
      // your project has ESLint errors.
      ignoreDuringBuilds: true,
    },
  },
  images: {
    loader: "imgix",
    path: "",
  }
}
module.exports = withImages({
  fileExtensions: ["jpg", "jpeg", "png", "gif"],
  webpack(config, options) {
    return config
  }
})

Component Code:

import darklogo from '/public/image/logo/logo-dark.png'
import lightLogo from '/image/logo/logo-white.png'
export default function BrandLogo({logoWhite=false,...rest}){
return(
<>
    <img src={darklogo} alt="brand logo" {...rest}/>
</>
)
}``` 

• javascript
• reactjs
• next.js

• 1 Please also add the (ponent) code where you're importing the image. – bonnopc Commented Aug 8, 2021 at 9:58
• Try with relative paths. Like: import logo from '../public/image/logo.png' if you have more nested structure just go up to the root. Or set a root path then it's not conflicting to navigate. – Golamrabbi Azad Commented Aug 8, 2021 at 10:00
• ponent code updated – Omi Commented Aug 8, 2021 at 11:40
• Does this answer your question: PNG images cannot be loaded | NextJS? Just reference each image by their path in the public folder directly in the <img>'s src prop - no need to import them. – juliomalves Commented Aug 8, 2021 at 14:57
• not actually i was trying to import images from 3 level nested path. – Omi Commented Aug 9, 2021 at 1:55

2 Answers 2

I have solved my problem by editing my jsconfig.json file. it looks like below:

{
   "pilerOptions": {
    "module": "monjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2017",
    "sourceMap": true,
    // "outDir": "./dist",
    "baseUrl": ".",
    "resolveJsonModule": true,
    "moduleResolution": "node",
    "paths": {
        "~ponents/*": ["src/ponents/*"],
        "~ponents": ["src/ponents"],
        "~fonts/*": ["public/fonts/*"],
        "~fonts": ["public/fonts"],
        "~image/*": ["public/image/*"],
        "~image": ["public/image"],
        "~sections": ["src/sections"],
        "~sections/*": ["src/sections/*"],
        "~styled/*": ["src/styles/*"],
        "~styled": ["src/styles"],
        "~scss/*": ["src/styles/scss/*"],
        "~scss": ["src/styles/scss"],
        "~data/*": ["src/data/*"],
        "~data": ["src/data"],
        "@/*": ["node_modules/*"],
        "@": ["node_modules"],
    }
}

and my ponent now looks like this:

import darklogo from '~image/logo/logo-dark.png'
export default function BrandLogo({logoWhite=false,...rest}){
  return(
    <>
      <img src={darklogo} alt="brand logo" {...rest}/>
    </>
  )
}

You can't use the absolute path to import an image. Needed to use the relative path when importing an image. like- ../public/folder. The absolute path is only able to use directly with src. Cause, files inside the public can then be referenced by your code starting from the base URL (/).