개인 프로젝트 배포 중 이미지가 엑박으로 보였다.
yarn build ->yarn start로 실행했을 시에도 엑박으로 나온다.
yarn dev로 실행했을 시 제대로 나온다.
The requested resource isn't a valid image for /image/tech.png received text/html; charset=utf-8
The requested resource isn't a valid image for /image/interview.png received text/html; charset=utf-8
경로가 /image/tech.png 및 /image/interview.png이지만 서버는 해당 경로에서 이미지 파일을 못찾고 text/html; charset=utf-8 이라는 텍스트/HTML 형식의 응답을 반환하고 있다.
그래서 파일명은 제대로 작성하였으나, 경로를 제대로 찾아가지 못한다고 생각하여 확인해보니 폴더명이 잘못되었다. image-> Image로 작성하니 잘되었다.
이것이 헷갈렸던 이유는 dev환경에서는 잘되었다가 build하니 안되었던 것이 문제였다.
한두시간동안 노력하면서 확인된 사실은 dev 환경에서는 경로가 잘못되어도 알아서 찾아주는 것이다.
하지만 배포하면 자동으로 찾아주지를 못하니 오류가 뜬 것이라 생각한다
이 오류를 해결하려고 노력하다가 파일명 작성하는 여러방법을 알게 되었다.
import techImage from '../../../public/Image/tech.png';
이런식으로 불러오기도 했고, 절대경로도 해보았다.
작은 문제지만 너무 오래 시간을 쏟았다.
기초에 충실하자
그리고 sharp 설치를 권장하는 알람이 떴다.
(vercel 배포시 하지 않아도 된다.)
sharp는 이미지를 빠르고 효율적으로 처리할 수 있는 이미지 처리 라이브러리이다. sharp를 사용하면 이미지를 리사이징하거나, 크롭하거나, 필터링하거나, 포맷을 변환하는 등의 작업을 쉽게 수행할 수 있습니다.
다른 이미지 처리 라이브러리들과 달리 sharp는 C++로 구현되어 있어 빠른 속도와 효율성을 제공한다.
따라서, sharp를 사용하면 이미지 처리 작업을 더욱 효율적으로 처리할 수 있으며, 더 빠르고 안정적인 웹 사이트를 구현할 수 있다.
sharp는 이미지 처리를 위한 Node.js 모듈 중 하나다. Next.js에서 이미지 최적화를 수행하기 위해 사용되는데, sharp를 사용하려면 먼저 sharp 패키지를 설치해야 한다.
npm install sharpnext.js 에서는 node.js 코드를 사용할 수 있다.
import sharp from 'sharp';
import path from 'path';
export async function getStaticProps() {
// 이미지 경로 설정
const imagePath = path.join(process.cwd(), 'public/image/tech.png');
// sharp로 이미지 처리
const resizedImageBuffer = await sharp(imagePath)
.resize({ width: 500 })
.jpeg({ quality: 80 })
.toBuffer();
// base64로 변환하여 img 태그에서 사용할 수 있도록 함
const resizedImageBase64 = `data:image/jpeg;base64,${resizedImageBuffer.toString('base64')}`;
// props에 데이터와 처리된 이미지를 반환
return {
props: {
imageSrc: resizedImageBase64,
someData: 'example data',
},
};
}
위처럼 사용하면 가능하다.
import Image from 'next/image';
export default function ExampleComponent({ imageSrc, someData }) {
return (
<div>
<p>{someData}</p>
<Image src={imageSrc} alt="example image" width={500} height={300} />
</div>
);
}
아래 처럼 적용하여서 최적화가 가능하다.
이번 프로젝트에 고화질을 사용할 때 적용해볼 예정이다.
추가
sharp참고: Vercel 배포에는 자동으로 설치되므로 필요하지 않습니다
https://nextjs.org/docs/messages/sharp-missing-in-production
