Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – importing image for Next/Image component

I’m new to Nextjs. using the latest stable version with app router.

I tried to set the image source to Image component of Next js as shown in the code below:

    <Link href={_coInfo?.WASite} style={{ textDecoration: "none" }}>
      <Image alt="Logo" src='/assets/fallbackLogo.png' width={500} height={500} />
    </Link>

but it doesn’t recognize the path and doesn’t show the image. this is my folder structure:

src
└── app
    ├── baseurl
    ├── sass_utils
    ├── xhr
    ├── assets
    │   └── fallbackLogo.png
    ├── fonts
    ├── login
    ├── theme
    ├── favicon.ico
    ├── globals.scss
    ├── layout.js
    ├── page.js
    ├── page.module.css
    └── middleware.js

now, looking to the Next js document, it is a bit confusing. in the Next/Image document it shows this example:

https://nextjs.org/docs/pages/api-reference/components/image

import Image from 'next/image'
 
export default function Page() {
  return (
    <Image
      src="/profile.png"
      width={500}
      height={500}
      alt="Picture of the author"
    />
  )
}

but in other part of the document it shows this example:

https://nextjs.org/docs/app/building-your-application/optimizing/images#local-images

import Image from 'next/image'
import profilePic from './me.png'
 
export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
      // width={500} automatically provided
      // height={500} automatically provided
      // blurDataURL="data:..." automatically provided
      // placeholder="blur" // Optional blur-up while loading
    />
  )
}

and in this example, it says width and height are automatically provided, which can cause problem for me, because if I have a larger image originally but I want to show an small version of it on the page, I can’t do this.

so, I don’t know, whether should I import the image and then later on I should use it as src of the Image component, or I should give the path to its relative directory.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I decided to create the public folder myself. looking at grekier's answer.


  2. 0

    The Image with src string will use the path as a URL which means that /assets/fallbackLogo.png will result in a GET request to this path on the host you are running your app on i.e. http://localhost:3000/assets/fallbackLogo.png when running locally with defaults.

    When using the src folder, the publicly available files should reside under src/public (which you should already have if you didn’t create your project manually)

    So, to make it work, move your assets directory from src/app to src/public (assuming you don’t have js files in this folder)

    If you want to use the import, just change to the path of your project to the image file and Next will do some magic to make it available. This would be something like import fallbackLogo from './assets/fallbackLogo.png'; if you want to it in the project’s root files (layout or page)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search