메인페이지의 썸네일 이미지를 불러오기 위해 동적 로딩을 적용하였었습니다.
이미지 동적로딩을 위해 Gatsby 에서 제공해주는 root 디렉토리 아래 static 폴더에 이미지들을 모두 넣었었는데요.
그러다보니 Gatsby 에서 제공하는 Gatsby-remark-image 플러그인을 비롯한 이미지 기능들이 동작을 하지 않는 이슈가 발생해버렸습니다.
lazy-load, blur-up 과 같은 이미지 기능이 동작하지 않는 이슈는 static 폴더 안으로 이미지들을 집어 넣으면서 Gatsby의 이미지 관련된 플러그인들이 정상동작하지 않는게 원인이었습니다.
그리하여, 동적로딩을 위한 썸네일이미지들만 static/thumb-images 폴더 밑에 모아두기로 결정하였습니다.
나머지 페이지들에서 필요한 이미지들은 기존과 마찬가지로 마크다운 파일들이 모여있는 content 폴더 밑으로 다시 모아두었습니다.
결론
동적로딩 썸네일 이미지들 디렉토리 -> static/thumbnail-images
동적로딩 필요하지 않은 페이지에서 필요한 이미지들 -> content/...
이미지 관련 이슈 발생
메인페이지의 썸네일 이미지를 불러오기 위해 동적 로딩을 적용하였었습니다. 이미지 동적로딩을 위해 Gatsby 에서 제공해주는 root 디렉토리 아래 static 폴더에 이미지들을 모두 넣었었는데요. 그러다보니 Gatsby 에서 제공하는 Gatsby-remark-image 플러그인을 비롯한 이미지 기능들이 동작을 하지 않는 이슈가 발생해버렸습니다. lazy-load, blur-up 과 같은 이미지 기능이 동작하지 않는 이슈는 static 폴더 안으로 이미지들을 집어 넣으면서 Gatsby의 이미지 관련된 플러그인들이 정상동작하지 않는게 원인이었습니다.
그리하여, 동적로딩을 위한 썸네일이미지들만 static/thumb-images 폴더 밑에 모아두기로 결정하였습니다. 나머지 페이지들에서 필요한 이미지들은 기존과 마찬가지로 마크다운 파일들이 모여있는 content 폴더 밑으로 다시 모아두었습니다.
결론
동적로딩 썸네일 이미지들 디렉토리 -> static/thumbnail-images 동적로딩 필요하지 않은 페이지에서 필요한 이미지들 -> content/...
이상입니다. 👍