쿼리문에 오류가 발생합니다

Question

frontmatter { title summary date(formatString: "YYYY.MM.DD.") categories thumbnail { childImageSharp { fluid( maxWidth: 768 maxHeight: 200 fit: INSIDE quality: 100 ) { ...GatsbyImageSharpFluid_withWebp } } } } 위의 쿼리문은 동작하지 않습니다. 아래 쿼리문처럼 해야 동작을 하네요 frontmatter { title summary date(formatString: "YYYY.MM.DD.") categories thumbnail } 이렇게 되면 PostItem에 아래 코드를 사용할 수가 없게됩니다. 그래서 아래처럼 대체했습니다. < img src = { thumbnail } alt = 'Post Item Image' /> 근데 의도하신 강의 내용과 다른 거 같아서 어떡해야할지 모르겠네요

주현도 · Answer

안녕하세요, Choi Boo님! 답변 늦어서 죄송합니다 ㅠㅠ 확인해보니까 마크다운 파일에 작성된 썸네일 이미지가 contents 디렉토리가 아닌 public 디렉토리에 있어서 발생한 문제였습니다. Fluid 이미지 생성 작동 원리는 다음과 같습니다. 1. gatsby-source-filesystem 라이브러리를 통해 마크다운 파일 및 썸네일 이미지 경로를 지정한다. { resolve: `gatsby-source-filesystem` , options: { name: `contents` , path: ` ${ __dirname } /contents` , }, }, 위의 코드에 의해 Gatsby 프레임워크는 contents 디렉토리의 파일을 인식할 수 있습니다. 2. gatsby-remark-images 라이브러리를 통해 최적화된 이미지를 생성한다. { resolve: 'gatsby-remark-images' , options: { maxWidth: 768 , quality: 100 , withWebp: true , }, }, 이번엔 위의 코드에 의해 Fluid 및 Fixed 이미지를 사용할 수 있게 최적화된 이미지를 생성합니다. 결국 썸네일 이미지가 contents 디렉토리에 존재하지 않으면 위의 모든 기능을 사용할 수 없습니다. public 디렉토리에 저장한다면 URL을 통해서만 이미지에 접근이 가능하고, 최적화된 이미지를 사용할 수 없습니다. 따라서 해당 문제는 이미지 파일을 contents 디렉토리에 그대로 복사한 후, 강의에 있는 코드대로 작성해주시면 잘 동작할 것입니다 :D

Choi Boo · Answer

https://github.com/qnrjs42/gatsby-blog 입니다. 버전 문제일까요??

주현도 · Answer

안녕하세요, Choi Boo님! 정확하게 파악하기 위해서 해당 프로젝트를 업로드한 깃허브 링크가 필요할 것 같습니다. 링크 댓글로 달아주시면 확인한 후 답변 알려드리겠습니다 :)