-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
childImageSharp가 자꾸 null이라고 뜨네요..ㅠ
21.05.25 02:04 작성 조회수 268
1
다시 되돌아가서 쭉 훑어봤는데, 오타나 잘못친게 없는데 자꾸 이런 에러가 나오네요..
답변을 작성해보세요.
0
주현도
지식공유자2021.06.03
Root Directory > static 디렉토리 안에 파일명이 "profile-image"인 이미지 파일을 추가해주셨는지 확인 부탁드려요!
만약 이미지가 있는데도 오류가 뜬다면 깃허브에 프로젝트 전부 올려주신 후, 레포지토리 주소 올려주시면 확인해보겠습니다 :)
0
몽키스
질문자2021.05.31
해당 index.tsx의 코드는 아래와 같습니다.
깃허브에는 아직 업로드 하지 않았는데, 보시고 만약 더 필요하시면 깃허브에 업로드할게요!
-----
import React, { FunctionComponent } from 'react';
import styled from '@emotion/styled';
import GlobalStyle from '../components/Common/GlobalStyle';
import Introduction from '../components/Main/Introduction';
import CategoryList from '../components/Main/CategoryList';
import Footer from '../components/Common/Footer';
import PostList, { PostType } from '../components/Main/PostList';
import { ProfileImageProps } from '../components/Main/ProfileImage';
import { graphql } from 'gatsby';
interface IndexPageProps {
data: {
allMarkdownRemark: {
edges: PostType[];
};
file: {
childImageSharp: {
fluid: ProfileImageProps['profileImage'];
};
};
};
}
const CATEGORY_LIST = {
All: 5,
Web: 3,
Mobile: 2,
};
const Container = styled.div`
display: flex;
flex-direction: column;
height: 100%;
`;
const IndexPage: FunctionComponent<IndexPageProps> = function ({
data: {
allMarkdownRemark: { edges },
file: {
childImageSharp: { fluid },
},
},
}) {
return (
<Container>
<GlobalStyle />
<Introduction profileImage={fluid} />
<CategoryList selectedCategory="Web" categoryList={CATEGORY_LIST} />
<PostList posts={edges} />
<Footer />
</Container>
);
};
export default IndexPage;
export const queryPostList = graphql`
query queryPostList {
allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___date, frontmatter___title] }
) {
edges {
node {
id
frontmatter {
title
summary
date(formatString: "YYYY.MM.DD.")
categories
thumbnail {
childImageSharp {
fluid(
maxWidth: 768
maxHeight: 200
fit: INSIDE
quality: 100
) {
...GatsbyImageSharpFluid_withWebp
}
}
}
}
}
}
}
file(name: { eq: "profile-image" }) {
childImageSharp {
fluid(maxWidth: 120, maxHeight: 120, fit: INSIDE, quality: 100) {
...GatsbyImageSharpFluid_withWebp
}
}
}
}
`;
0
주현도
지식공유자2021.05.27
안녕하세요, 몽키스님.
혹시 프로젝트를 깃허브에 업로드하셨다면 링크 답변으로 남겨주시면 감사하겠습니다.
아니면 해당 부분 소스코드 전부 답변으로 달아주세요!
답변 4