Next.js: 이미지 처리

안녕하세요!

문서에서 Static file serving. ./static/ is mapped to /static/

따라서 일반 img 태그를 사용할 수 있습니다.
static이라는 폴더를 만들고 그 안에 이미지를 넣습니다.

궁금한 점이 있으면 언제든지 다시 열어보세요.

@impronunciable 모든 이미지를 동일한 글로벌 static 폴더에 저장하는 것은 좋지 않다고 생각합니다. 사용된 이미지와 더 이상 사용되지 않는 이미지를 2개월 안에 어떻게 알 수 있습니까? 이미지는 이미지를 사용하는 구성 요소와 동일한 폴더에 저장될 수 있으며 추상화 계층을 사용하여 next.js 자체에 의해 /static으로 이동할 수 있으므로 다음과 같이 할 수 있습니다.

import myImg from './myImg.png';

그리고 나중에

<img src={myImg} />

좋은 개발자 경험이 될 것입니다.

@pietrasiak 글쎄, 이미지 저장에 대한 좋은 아이디어에 대해 이야기하고 싶다면 프로덕션을 위해 CDN에 저장해야 합니다. 정적 폴더는 개발의 표준이며 terrible 아이디어라고 말하지 않겠습니다. 웹팩 로더를 사용하여 제안한 것을 달성할 수 있지만

모든 정적 파일을 구성 요소와 분리된 단일 폴더에 넣는 것은 완전히 끔찍한 생각입니다. 모든 파일을 기억하기 어렵고 정적 폴더에 있는 파일의 이름도 컴포넌트의 구조에 맞게 변경합니다. @pie6k 제안에 동의하지만 구현이 어려운지 아닌지 모르겠습니다. 이러한 솔루션에서 우리는 svg-loaders와 같은 로더 최적화의 이점을 얻을 수도 있습니다.
이 기능을 구현하고 싶지만 next.js가 처음입니다.

@impronunciable 나는 CDN이 없어도 좋은 파일 구성을 갖춘 정적 서버에 저장하는 것이 좋은 출발점이라고 생각합니다.

최종 'url'이 반환되기 전에 어떤 방식으로든 처리(next.js에 의해 정적 폴더로 이동, 이름 변경 등)된 경우 해당 파일 이동을 관리하는 일부 기능을 거기에 연결하는 것이 상대적으로 쉬울 것이라고 생각합니다. CDN에 연결하므로 계속 사용할 수 있습니다.

import myImg from './myImg.png';
// and then
console.log(myImg); // 'http://your.cdn/myImg.png'

그러면 완전히 새로운 클래스의 next.js 효과적인 워크플로 사용자 지정이 가능합니다.

좋아, 나는 이 플러그인을 추가했다: babel-plugin-import-static-files
지금까지 작동 중입니다. 문제가 있으면 알려주세요.
가져온 이미지를 /static 폴더에 복사하고 이미지 경로를 /static/path/to/img.png 포인트로 변환합니다. 이 플러그인은 babel-plugin-transform-assets-import-to-string 에서 분기됩니다.

@ahalimkara 이것이
다음 4.1.0 에서 "이 파일 유형을 처리하려면 적절한 로더가 필요할 수 있습니다"라는 메시지가 표시됩니다.

@anselmdk by code example import myImg from './myImg.png' 나는 그것이 실제로 어떻게 작동하는지가 아니라 어떻게 작동하는지에 대한 예를 의미했습니다.

알겠습니다. 이 작업을 수행하려면 사용자 지정 로더가 필요합니다.

@anselmdk 예 , 작동해야 합니다. 문제가 있으면 알려주세요.

@ahalimkara babel-plugin-import-static-files가 Windows의 경로를 올바르게 구성하지 않는 것 같습니다.

오류:

E:\Dropbox\Programming\client\src\static\E:\Dropbox\Programming\client\src\app\routes\Landing contains invalid WIN32 path characters.

@amosyuen 기본 옵션을 사용합니까 아니면 사용자 지정 옵션을 사용합니까? Landing 파일에 확장자가 없습니까?

( 문제 탭을 활성화했으므로 여기에서 요청을 제출할 수 있습니다.)

https://github.com/ahalimkara/babel-plugin-import-static-files/issues/1 생성한 새 문제에 자세한 내용을 게시했습니다.

@ahalimkara 문제가 있습니다. 나는 당신에게 문제를 게시했습니다. 도와주 시겠습니까 ahalimkara/babel-plugin-import-static-files#2

@luanwulin 네 문제 페이지를 사용하십시오. 거기에서 모두 확인하고 있습니다. 감사합니다.

@ahalimkara 귀하의 문제 페이지에 문제를 게시했습니다. 문제#2

https://github.com/zeit/next.js/issues/79#issuecomment -300138252 권장 사항에 대한 공식 지원(또는 이를 구현하지 않는 이유에 대한 공식 입장 또는 공식 권장 사항)이 있을 때까지 누군가가 다시 열 수 있습니까? 해결 방법)?

커뮤니티의 대부분이 https://github.com/zeit/next.js/issues/79#issuecomment -300138252에 동의하는 것 같습니다.

https://github.com/zeit/styled-jsx/pull/148 이 문제를 해결할 수 있는 것 같습니다.

테스트되지 않은 유사 예:

// components/Header/HeaderStyle.js
export default `
h3 { color: red; }
`

// components/Header/HeaderComponent.js
import style from './HeaderStyle'

export default () =>
  <div>
    <h3>Yo</h3>
    <styled jsx>{style}</styled>
  </div>

Nicolas Gallagher의 구성 요소 아키텍처 설정에 관심이 있는 경우 HeaderComponent.js 를 HeaderScript.js 및 HeaderTemplate.js 로 분할할 수 있습니다. 🤷‍♂️

이제 다음에서 require 또는 import 이미지를 사용할 수 있습니다.

실제로 v5에서 웹팩 로더를 사용할 수 있습니다. 누군가 이미 이미지 처리용 플러그인을 만들었습니다: https://github.com/arefaslani/next-images

참조: https://github.com/zeit/next.js/issues/1935#issuecomment -367039454

...또는 https://github.com/arefaslani/next-images/blob/master/index.js의 설정에 따라 webpack 구성을 수정하십시오.

publicPath: '/_next/static/images/',
outputPath: 'static/images/' 

여기에서 볼 수 있듯이: https://github.com/arefaslani/next-images/blob/master/index.js

next-images는 webpack만 구성합니다.

개발에 sass와 이미지를 사용하고 싶지만 이러한 모듈을 구성하는 데 문제가 있습니다.

next.config.js의 @zeit/next-sass 및 next-images 구성 문제

``
const withSass = require('@zeit/next-sass')
const withImages = require('다음 이미지')

module.exports = withSass();
module.exports = withImages();
``

그것을 해결하는 방법?

개발에 sass와 이미지를 사용하고 싶지만 이러한 모듈을 구성하는 데 문제가 있습니다.

next.config.js의 @zeit/next-sass 및 next-images 구성 문제

``
const withSass = require('@zeit/next-sass')
const withImages = require('다음 이미지')

module.exports = withSass();
module.exports = withImages();
``

그것을 해결하는 방법?

안녕하세요 방금 이걸 봤습니다. 하지만 여전히 이미지의 URL을 리디렉션하는 데 문제가 있습니다.
const withSass = require('@zeit/next-sass');
const withImages = require('다음 이미지');

module.exports = withImages(withSass({
웹팩: 기능(구성) {
// 사용자 정의 구성
구성 반환
}
}));

감사합니다

@imronunciable 모든 파일은