개발자
vscode에서 리액트 프로젝트를 만들었고 vercel로 사이트를 배포했습니다. 배포된 사이트를 들어가면 전체적으로 잘 작동을 하는데 이미지 하나가 화면에 안뜨네요... 개발자 도구로 확인을 해보면 이미지를 불러오고 있기는 한데, 화면에는 안뜨는 이유가 뭘까요? 이미지는 화면 전체를 감싸는 컨테이너 컴포넌트에 스타일 컴포넌트를 적용하고 있는데 background에서 url을 불러오는 방식을 사용하고 있습니다. ex) const Container = styled.div` background: url('/images/Image.svg') ` 위와 같은 형식으로 작성을 했습니다. 원인이 뭘까요??
답변 1
네트워크탭에서 이미지 fetch 이상 없다고 확인 하신거죠? 엘리먼트 탭에서 해당 div의 영역이 어떻게 잡히나 확인해보셨나요?? div의 width나 height가 0으로 잡혀있진 않은지 확인하고 싶네요.
익명
작성자
2024년 03월 11일
width와 height는 각각 다음과 같이 설정했습니다!! width: 100%; height: 100vh;
익명
작성자
2024년 03월 11일
질문을 올린 이유가 npm start로 제 local을 이용해서 브라우저를 열었을 때는 이미지가 화면에 잘 표시가 되는데, 배포된 사이트로 들어갔을 때 이미지 표시가 안되서 올렸습니다...ㅠㅠ
김현우
다니다 풀스택 개발자 • 2024년 03월 11일
아 그럼 혹시 배포하실 땐 빌드 결과물만 옮기셨나요? 배포된 서버 통해서 페이지 열고, 엘리먼트 탭에서 해당 div 선택하시고, div에 적용된 css 중 background 속성에 값이 어떻게 들어가있는지 확인해보시면 어떨까요? 그리고 혹시 브라우저 주소창에 ‘서버주소/images/Image.svg' url 입력했을때 사진이 안나오고 404에러가 발생한다면, 배포환경에서의 이미지 경로를 잘못 잡은 것일 수도 있습니다.
김현우
다니다 풀스택 개발자 • 2024년 03월 11일
혹시 /public/images 폴더를 배포서버에 올리셨는지도 확인해보면 좋을 듯해요
김현우
다니다 풀스택 개발자 • 2024년 03월 11일
vercel로 배포하셨다는 말씀 다시 보고 한번 찾아봤는데 이런게 있네요. 참고해보셔도 좋을 듯합니다. https://codingapple.com/forums/topic/리액트-쇼핑몰-배포시-이미지엑박문제가-생겼습니/ https://velog.io/@minh0518/FIFAPulse-개발기록-Vercel-배포-시-새로고침-및-url-참조시-발생하는-404-해결-및-이미지-참조-경로
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 03월 11일
베르셀 배포시 이미지가 불러와지지 않는 이유로 몇 가지 가능성이 있습니다. 1. 경로 문제: Vercel에서는 상대 경로 대신 절대 경로를 사용해야 합니다. 따라서 아래와 같이 변경하여 보시기 바랍니다. ``` background: url('/public/images/Image.svg') ``` 'public'이라는 폴더는 React 앱에서 정적 파일을 제공하는 곳입니다. 2. 대소문자 일치: 일부 호스팅 플랫폼들은 URL의 대소문자를 엄격하게 구분합니다. 로컬에서는 작동하지만 배포 후에 작동하지 않는 경우, 파일 이름과 참조하는 코드의 대소문자가 정확하게 일치하는지 확인하세요. 3. 이미지 형식: SVG 파일은 특정 설정 없이 웹에서 직접 보여줄 수 없습니다. 다른 이미지 형식(JPG, PNG 등)으로 변환하여 시도해보세요. 4. 최적화 문제: Create React App은 기본적으로 Webpack의 File-loader를 사용해 이미지를 처리합니다. 이 과정에서 문제가 발생할 수 있습니다. url-loader나 raw-loader 등 다른 로더로 시도해보세요. 5. 캐싱: 가끔씩 브라우저 캐싱으로 인해 변경사항이 반영되지 않을 때가 있습니다. Ctrl + Shift + R을 눌러 강제로 새로 고침 하거나, 비공개창에서 사이트를 열어보세요. 위의 방법들로도 해결되지 않는다면, 오류 메시지를 함께 제공해주시면 더 정확한 도움을 드릴 수 있을 것 같습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!