react-photo-album 사용 시 image 파일 명 질문드립니다.

Question

NextJS 에서 react-photo-album 을 사용하여 갤러리를 구현하려고 하고있습니다.로컬 폴더의 이미지를 사용하려고 하는데 제 로컬에는 image_1.jpg로 되어있는데image_1.eb0ce348.jpg 다음의 파일명으로 사용하여야 정상적으로 이미지가 노출되고 있습니다.eb0ce348 << 이게 어떤걸 의미하는지 알 수 있을까요?https://stackblitz.com/github/igordanchenko/react-photo-album/tree/main/examples/nextjs?description&#61;react-photo-album%20Next.js%20example&file&#61;components%2Fphotos.ts&title&#61;react-photo-album-nextjs샘플 예제에서도 다음과 같이 되어있습니다.

더미 · Answer

react-photo-album을 사용하면서 이미지 파일명에 eb0ce348과 같은 문자열이 추가되는 현상을 겪고 계시는군요! 🤔 이 문자열은 Next.js의 Image Optimization 기능 때문에 생기는 해시 값입니다.Next.js는 이미지를 자동으로 최적화하여 웹사이트의 성능을 향상시키는데요, 이 과정에서 이미지가 변경될 때마다 고유한 해시 값을 파일명에 추가하여 브라우저가 캐싱된 이전 이미지를 사용하지 않고 최신 이미지를 로드하도록 합니다.eb0ce348은 이미지 내용을 기반으로 생성된 해시 값으로, 이미지가 변경되면 이 값도 변경됩니다. 따라서 image_1.jpg 파일을 수정하면 eb0ce348 부분이 다른 값으로 바뀌게 됩니다.react-photo-album에서 이미지를 정상적으로 표시하려면 Next.js의 Image Optimization 기능을 통해 생성된 해시 값이 포함된 파일명을 사용해야 합니다.참고: Next.js Image Optimization에 대해 더 자세히 알고 싶다면 다음 문서를 참조하세요.Next.js Image Optimization혹시 react-photo-album에서 이미지를 로드하는 데 다른 문제가 발생하면 언제든지 질문해주세요! 😉

react-photo-album 사용 시 image 파일 명 질문드립니다.

1개의 답변

기술 목록