Nextjs: 정적 폴더에서 이미지를 로드할 수 없습니다.

Nextjs: 정적 폴더에서 이미지를 로드할 수 없습니다.

Next.js 컴포넌트에 이미지를 로드하려면 어떻게 해야 합니까?프로젝트를 먼저 만들어야 하나요?그렇다면 먼저 빌드하지 않고 이미지를 로드할 수 있는 방법이 있습니까?아무리 노력해도 효과가 없어.

다음 문서를 참조해 주세요.

next.js는 루트 디렉토리의 public이라는 폴더 아래에 이미지 등의 정적 파일을 제공할 수 있습니다.그 후, 퍼블릭 내부의 파일은, 베이스 URL(/)로부터 시작하는 코드로 참조할 수 있습니다.

먼저 를 붙입니다.public/my-image.png을 사용하다

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

는 이 next.js를 찾을 필요가 그러면 이 디렉토리에서 워치를 사용할 필요가 없습니다.start서버에 접속할 수 있습니다.

정적 디렉터리는 더 이상 사용되지 않습니다.을 「」에 배치합니다.public/static

다음 이미지를 찾는 다른 방법

설치:npm install --save next-images

★★★★★★★★★★★★★★★★★」yarn add next-images

사용방법:

작성하다next.config.js의 계획으로

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

필요에 따라 커스텀 Next.js 구성을 파라미터로 추가할 수 있습니다.

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

컴포넌트 또는 페이지에서 이미지를 Import하기만 하면 됩니다.

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

또는

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

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

.js v11을 직접 사용할 수 .import★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★식댓글댓댓댓 。

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

문서:

Next 10+에서는 최적화된 이미지를 제공합니다.

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

이미지를 공용 폴더에 배치합니다.참조된 모든 이미지는 빌드 시 공용 폴더에 있어야 합니다.이미지 핫 배포는 공용 폴더에 있는 이미지에 대해 작동하지 않습니다.도 있습니다.<Image>붙이다

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

이미지를하려면 , 의 엔트리를, 「도메인」에 추가해 주세요」에 합니다.next.config.js

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

}

을 할 때 것은 이미지 연출을 사용하는 입니다.environment variables . 、 next . settings . . 、 next . settings . set set set 。next.config.js다음과 같이 합니다.

// next.config.js

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

'로 가든지'를 해서 '어디로 로 가는 길을 할 수 요.process.env.PUBLIC_URL음음음같 뭇매하다

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

PUBLIC_URL 환경변수를 사용하여 경로를 하드코딩하는 것의 장점은 파일 배열이 변경될 때(서버 등) 다른 경로를 사용할 수 있다는 것입니다.그러면 생산 및 개발에서 사용할 PUBLIC_URL 값을 조건부로 설정할 수 있습니다.

---

갱신하다

되지 않을 때 는 bc가 올바른 입니다.layout가 있다, , 없다width ★★★★★★★★★★★★★★★★★」height(「」와 함께 의 아트리뷰트layout이외에fill.

Next.js 버전 13의 이미지 컴포넌트 사용은 이전 버전과는 조금 다릅니다.실제로 더 쉽고, 작업이나 작업도 덜 하고 최적화 기능을 사용할 수 있습니다.이 버전에서는:

• 당신은 의무적으로 설정할 필요가 없습니다.domains에next.config.js.
• 이미지의 폭과 높이를 설정하거나 다음과 같이 설정할 수 있습니다.fill스타일 또는 classNames로 사이징을 처리합니다.즉, 최대 높이 또는 최대 너비를 설정할 수 있기 때문에 이미지의 폭과 높이를 알 수 없습니다.
• 및 이전 버전을 사용할 수 있습니다.priority그리고...

여기에 보통 쉽게 잊혀지는 명백한 사례를 하나 추가하겠습니다.사이트 페이지를 재구성하여 IDE가 관련 파일/컴포넌트의 경로를 "사일런트하게" 업데이트하지 못하거나 단순히 한 쪽이 더 피곤하거나 주의가 산만할 때 계속 나타납니다.

폴더 ex 내에서 페이지를 사용하는 경우:mysiteDomain/pagefolder/page상대 경로를 사용할 때는 주의해야 합니다.뭐랄까<img src="logo.png" />로 변경해야 한다<img src="../logo.png" />컴파일된 페이지도 폴더 내에 있기 때문에pagefolder의 패스src속성은 컴파일된 페이지를 기준으로 합니다.

대안으로, 단순히 ex와 같은 절대 경로를 사용할 수 있습니다.<img src="/logo.png" />의 패스src속성은 사이트의 컴파일된 루트에 상대적입니다.

넣지 마세요public안으로/src!

저 같은 경우에는...src내가 내 것을 넣은 dirpagesetc. 여기서 설명하는 옵션입니다.하지만 나는 또한 실수로 이삿짐을 옮겼다.public거기서 디르.이건 다음 문제를 망칠 거야 계속해야 해public dirroot dir 에습 in in in in in in in in in.

" " " 후next build && next export이미지가 표시되지 않는 경우는, 다음의 조작을 클릭합니다.

// 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",
  },
};

루트 프로젝트에서도 imageLoader.js를 만듭니다.

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

여기서 file://C:/Users/.../out은 빌드의 루트에 대한 전체 경로를 나타냅니다.

이제 process.env를 추가할 수 있습니다."/*"보다 앞에 루트

언급URL : https://stackoverflow.com/questions/49435368/nextjs-unable-to-load-images-from-static-folder