테스트다. 이미지가 잘 뜨나?

문제/맥락

이미지가 페이지에 표시되지 않는 문제는 빈번하지만 원인이 다양하다. 현업에서 가장 많이 마주한 사례는 파일 경로 오류, CORS/콘텐츠 보안 정책, 잘못된 Content-Type 응답, 그리고 CDN이나 캐시 문제였다. 특히 개발 환경과 배포 환경에서 상대경로가 달라지거나 HTTPS와 HTTP 혼합으로 차단되는 경우가 많아 원인 파악이 지연된다.

핵심 포인트

• 네트워크 탭으로 요청·응답 상태 먼저 확인: 200/304가 아닌 경우와 응답 바디 유무를 점검한다.

• Content-Type 확인: 이미지가 image/png, image/jpeg 등 올바른 MIME으로 전송되는지 확인한다.

• CORS 및 CSP: 외부 서버에서 불러오는 경우 Access-Control-Allow-Origin 헤더와 브라우저 콘솔의 CSP 경고를 확인한다.

• 경로·인코딩: URL 인코딩, 베이스 태그, 상대경로 오류 여부를 검증한다.

• 캐시·CDN: 캐시 무효화, CDN 설정(헤더 리라이트 등)으로 이미지가 갱신되지 않는지 점검한다.

• 도구 사용: curl로 직접 요청해 헤더·바디를 확인하고, 브라우저 개발자 도구의 Preview/Response를 활용한다.

정리

이미지가 보이지 않으면 UI쪽 탓보다 네트워크와 서버 설정을 먼저 점검하는 것이 빠르다. 단계적으로 요청 상태→헤더→정책→캐시 순으로 확인하면 원인 도출 시간이 단축된다.