인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

변재정님의 프로필 이미지
변재정

작성한 질문수

React 기반 Gatsby로 기술 블로그 개발하기

마크다운 형식의 포스트 출력하기

이미지가 출력되지않아요ㅠㅠ

작성

·

167

0

선생님이 알려주신대로 블로그를 만들어서 유용하게 운영중입니다.

지금까지 별 다른 문제가 없었는데 1달전부터 갑자기 마크다운 이미지가 안보이더라구요ㅠㅠ

이상한건 5월31일 이후 작성한 마크다운 게시물들만 이미지가 출력되지 않는다는겁니다..

제가 content 폴더에 마크다운, 이미지 파일을 싹다 몰아넣고 관리중인데 이게 문제인걸까요??

 

빌드하고 public 폴더 확인해보려니 양이 너무 방대해서 하나하나 확인할 엄두가안나네요...

혹시 해결 방법없을까요ㅠㅠ

https://github.com/BoubleJ/BoubleJ.github.io

제 깃허브 코드입니다. 감사합니다!

답변 2

0

변재정님의 프로필 이미지
변재정
질문자

자문자답이긴하지만 혹시 누군가에겐 도움되지 않을까해서 댓글남깁니다!

이미지가 출력되지 않는 이유는 확장자명 대소문자가 통일되지 않아 생긴 문제였습니다.

 

//마크다운 파일

![이미지](이미지.png)

위와 같이 이미지를 마크다운에 올렸다 가정할 때 제 프로젝트 내 이미지파일명이

이미지.PNG 로 되어있다면 이미지가 출력되지 않더라구요..

 

확장자 대소문자를 통일하면 해결됩니다!

 

 

근데 수정작업 완료후 PUSH해도 적용이 안되시는 분이 계실겁니다.

 

이건 깃허브가 대소문자를 별도로 구분하지 않아서 그래요.. 대소문자 변경 후 push해도 원격저장소는 변경사항이 없다는 것을 확인하실 수 있을겁니다.

 

이땐

git config core.ignorecase false

명령어 실행해주면 됩니다. 깃허브가 대소문자를 구분하도록 하는 명령어입니다.

혹시 모르니까 캐시 제거 한번 해주시구요

git rm -r --cached .

위 작업 후 git add . 진행하시면 정상적으로 동작할겁니다~

 

도움이 되셨으면 합니다!

0

안녕하세요, 인프런 AI 인턴입니다.

마크다운 이미지가 특정 기간 이후에 출력되지 않는 문제는 몇 가지 원인이 있을 수 있습니다. 여러분의 상황을 고려했을 때 가능한 해결 방법을 몇 가지 제안드립니다:

  1. 경로 문제 확인: 마크다운 내 이미지 태그의 경로가 올바른지 확인해보세요. Gatsby는 정적 파일을 처리할 때 특정 경로를 기준으로 파일을 찾기 때문에, 경로가 잘못되었다면 이미지가 출력되지 않을 수 있습니다.

  2. 빌드 로그 분석: Gatsby 빌드 과정에서 경고나 에러 메시지가 없는지 확인해보세요. 때로는 빌드 과정에서 경로 문제나 파일 참조에 관한 유용한 정보를 얻을 수 있습니다.

  3. gatsby-config.js 설정: gatsby-source-filesystem 플러그인 설정에서 content 폴더를 제대로 참조하고 있는지 확인해보세요. 이 플러그인을 통해 Gatsby는 마크다운 파일과 이미지 파일을 올바르게 처리할 수 있습니다.

  4. 캐시 문제 해결: Gatsby 프로젝트에서 gatsby clean 명령어를 사용하여 캐시를 클리어한 후 다시 빌드해보세요. 캐시가 오래되거나 문제가 있을 때 갱신되지 않은 콘텐츠가 표시될 수 있습니다.

  5. GitHub 코드 검토: 제공하신 GitHub 링크를 통해 최근 변경사항을 검토해보세요. 5월 31일 이후 변경된 사항 중 마크다운을 처리하는 방식이나 경로 관련 설정이 변경된 부분이 없는지 확인해 보는 것도 좋습니다.

이중에서도 특히 경로 문제를 확인하고 gatsby-source-filesystem 플러그인 설정을 다시 검토해보시는 것을 추천드립니다. 문제가 해결되지 않는다면, Gatsby 관련 커뮤니티나 Stack Overflow에도 도움을 요청해볼 수 있습니다. 문제의 원인을 찾아 해결하시길 바랍니다!

변재정님의 프로필 이미지
변재정

작성한 질문수

질문하기