CODEWITHSUNDEEP
reactjswebpacknext.js
Vaggelis Stefanakis
Vaggelis Stefanakis

Reputation: 867

Unable to load images from static folder

How can I load images in a component in Next.js? Do I have to build the project first? If yes, is there a way to load the images without building first? I cannot get this to work, no matter what I try.

Upvotes: 63

Views: 146335

Answers (11)

Priyanshu Gupta
Priyanshu Gupta

Reputation: 1

I have faced the same problem the point which we should check while using Next js.

  1. Image should be available
  2. Image should be present in public directory.
  3. Public directory should be present in those folder in which node module is present The thing which I did wrong is I placed the folder in public due to which my image was not showing

Upvotes: -3

JL14
JL14

Reputation: 19

Using the Image tag like below worked for me

import Image from 'next/image'

Upvotes: 0

Chukwuemeka Maduekwe
Chukwuemeka Maduekwe

Reputation: 8526

After running next build && next export and your images are not visible do this:

// next.config.js
/** @type {import('next').NextConfig} */

module.exports = {
  reactStrictMode: true,

  images: {
    loader: "custom",
    loaderFile: "./imageLoader.js",
  },

  assetPrefix: "./",

  env: {
    // dev does not need static path
    ROOTDIR: process.env.NODE_ENV === "development" ? "" : "file:///C:/Users/.../out",
  },
};

Create an imageLoader.js too in the root project

export default function imageLoader({ src, width, quality }) {
  return `process.env.NODE_ENV === "development" ? "" : "file:///C:/Users/.../out${src}?w=${width}?q=${quality || 75}`;
}

Where file:///C:/Users/.../out refers to full path to the root of your build

Now you can append process.env.ROOT before "/*"

Upvotes: -3

zahra shahrouzi
zahra shahrouzi

Reputation: 1012

what i like to do for directing to images is using environment variables. in next.js they are easily set in next.config.js file like below:

// next.config.js

module.exports = {
    env: {
      PUBLIC_URL: '/',
    }
};

then you can direct to your publics path wherever it is by using process.env.PUBLIC_URL like below:

<img src={`${process.env.PUBLIC_URL}/my-image.jpg`} />

the advantages of using PUBLIC_URL environment variable over hard coding the path is that you can use another path for when file arrangements change (like in server). for then you could set conditionally which PUBLIC_URL value to use in production and development.

update

sometimes the problem of images used with next/Image not showing is bc of not setting the right layout value or it lacks width and height attributes when used with layout other than fill.

Using Image component of Next.js version 13 is a little bit different than than its previous versions. It's actually easier and you can use optimization features with less effort and work arounds. In this version :

  • you're not obligated to set domains in next.config.js.
  • you can either set the image its width and height or set to fill and handle its sizing with styles or classNames which means you can set max-height or max-width. so in that case that you don't know your image's width and height it's be shown properly.
  • as well as its previous versions you can use priority and ...

Upvotes: 3

Magnus
Magnus

Reputation: 3722

Do NOT put public into /src!

In my case, I had a src dir into which I put my pages etc., which is an option described here. But I ALSO accidentally moved the public dir there. This will mess nextjs up -- you need to keep public in the root dir.

Upvotes: 0

user3658510
user3658510

Reputation: 2347

I will add here one obvious case, that is usually easily forgotten. It keeps appearing when one re-structure a site page and our IDE "silently fails" to update the paths of a related file/component or simply when one is more tired or distracted.

If you are using a page inside a folder ex: mysiteDomain/pagefolder/page You should be careful when using relative path. Something like <img src="logo.png" /> should be changed it to <img src="../logo.png" /> since the compiled page will also be inside a folder pagefolder. The path in the src attribute will be relative to the compiled page.

As an alternative, you could simply use an absolute path like for ex <img src="/logo.png" />. The path in the src attribute will be relative to the compiled root of the site.

Upvotes: 0

brc-dd
brc-dd

Reputation: 12964

From Next.js v11 onwards, one can now directly import images without any additional config or dependencies. Official example (comment mine):

import Image from 'next/image'
import profilePic from '../public/me.png'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image src={profilePic} alt="Picture of the author" />
      {/* <img src={profilePic.src} alt="Picture of the author" /> */}
      <p>Welcome to my homepage!</p>
    </>
  )
}

export default Home

Docs: next/image

Upvotes: 18

Lance
Lance

Reputation: 331

With Next 10+ To serve an optimized image:

import Image from 'next/image'
<Image src={'banner.jpg'} alt='Home Page' width={100} height={100} />

Place the image in the public folder. All the referenced images must be present in the public folder at the build time. Image hot deployment will not work for images that reside in the public folder. You also can refer to cross-domain images with <Image> tag.

<Image src={'https://www.example.com/banner.jpg'} alt='Home Page' width={100} height={100} />

To allow cross-domain images, ensure to add the below entry to your next.config.js

module.exports = {
images: {
    domains: ['www.example.com'],
},

}

Upvotes: 2

Tomasz Mularczyk
Tomasz Mularczyk

Reputation: 36179

from the docs:

Next.js can serve static files, like images, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/).

So, first add an image to public/my-image.png and then you can reference it:

<img src="/my-image.png" />

I think next.js will have a watch on this directory so you won't need to restart your server every time you put something in there.

Upvotes: 95

Md. Jamal Uddin
Md. Jamal Uddin

Reputation: 792

Another way I find out Next Images

installation: npm install --save next-images

or yarn add next-images

Usage:

Create a next.config.js in your project

// next.config.js
const withImages = require('next-images')
module.exports = withImages()

Optionally you can add your custom Next.js configuration as parameter

// next.config.js
const withImages = require('next-images')
module.exports = withImages({
  webpack(config, options) {
    return config
  }
})

And in your components or pages simply import your images:

export default () => <div>
  <img src={require('./my-image.jpg')} />
</div>

or

import myImg from './my-image.jpg'

export default () => <div>
  <img src={myImg} />
</div>

Upvotes: 11

Waitire Colline
Waitire Colline

Reputation: 572

The static directory has been deprecated. Place files in public/static directory

Upvotes: 19

Related Questions