최종 팀 프로젝트[front] netlify 배포 후 image 이슈

1. 프론트 baseURL이 바뀐 후 이미지를 불러오지 못하는 문제 발생 

 문제점

baseURL이 netlify로 교체 후 image 호출 에러 

// export const frontendBaseURL = "http://127.0.0.1:5500";
export const frontendBaseURL = "https://dapper-centaur-40e156.netlify.app";

 

 시도해 본 것들

이미지를 불러오는 if문을 문제로 판단 

            if (recommend.image) {
                if (recommend.image.includes('https:')) {
                    recommendImg.setAttribute("src", recommend.image)
                } else {
                    // 대체 url 코드로 인코딩된 url 디코딩 하기    
                    recommendImg.setAttribute("src", decodeURIComponent(recommend.image.split("media/")[1]))
                }
            }

 

            // if (recommend.image) {
            // if (recommend.image.includes('https:')) {
            // recommendImg.setAttribute("src", recommend.image)
            // } else {
            // 대체 url 코드로 인코딩된 url 디코딩 하기    
            recommendImg.setAttribute("src", decodeURIComponent(recommend.image.split("media/")[1]))
            // }
            // }

해결 X

다시 생각해보니 프론트 url이 붙는게 아니기 때문에 영향이 없을 것으로 추정 

 

 

script 위치 조정  

Failed to load resource: the server responded with a status of 404 ()

js에서 인식 실패로 발생하는 문제로 판단 

    <script type="module" src="./static/js/navbar.js"></script>
    <script type="module" src="./static/js/index.js"></script>
</body>

 head에 존재하던 sciprt 위치 조정 

해결 X

 

프론트 URL의 netlify 링크 확인 

netlify의 url이 로컬 환경과 다르게 이미지의 url을 filedown.do를 이미지로 보여주지 못하는 것 같다.

 알게 된 점

로컬 환경에서 가능한 것과 배포 환경에서 문제가 생기는 것은 배포를 해봐야 문제가 생겼음을 알 수 있는 부분이 많은 것 같다.

이를 위해서 로컬 환경이 아닌 배포를 염두해둔 프로젝트를 만든다면 개발 초기 단계에서도 배포 환경을 미리 준비할 생각을 해야할 것 같다.