🚨 문제 상황
웹페이지에서 동적으로 이미지를 추가하려고 했지만, 몇 시간을 붙들고 있어도 이미지가 불러와지지 않는 문제가 발생했다
이 글을 통해 innerHTML을 활용한 이미지 추가 과정에서 발생할 수 있는 문제와 그 해결법, 그리고 innerHTML의 특징에 대해서 알아보자
📍배경
🛠️ 사용 기술
HTML, CSS, JS를 사용해 동적으로 이미지를 추가하려 했으며, innerHTML을 활용해 이미지를 삽입하는 코드를 작성했다.
innerHTML 이란?
HTML 문자열을 삽입하여 DOM 요소를 동적으로 변경하는 JavaScript 방식이다
문제 상황
이미지가 정상적으로 표시되어야 하는데 이미지가 나타나지 않았다
하지만, alt 속성으로 지정해둔 텍스트는 잘 떠서 더 의문이었다🤔
아무리봐도 img 경로는 JS 파일을 기준으로 명확하게 작성되어있어서 img를 처리하는 이벤트 함수에 문제가 생긴 줄 알고 열심히 삽질을 했다..
💡해결 과정
문제 상황 코드
document.getElementById('image-container').innerHTML = '<img src="./assets/images/img1.jpg" alt="공지사항 이미지">';
여기서 ./images/img1.jpg 경로는 JS 파일이 위치한 경로를 기준이다
하지만, 실제 이미지 파일은 HTML 파일을 기준으로 작성해야 하는데, 이 부분을 간과하여 이미지를 불러오지 못했던 것이다 !!
해결 코드
document.getElementById('image-container').innerHTML = '<img src="./src/assets/images/img1.jpg" alt="공지사항 이미지">';src 경로를 HTML 파일을 기준으로 수정했고 이미지가 다시 잘 불러와졌다!
🤔 이유
왜 innerHTML 코드가 JS 파일 안에 있더라고 이미지 경로는 HTML 파일 기준으로 작성해야 할까?
이유는 브라우저가 HTML 파일을 기준으로 DOM을 렌더링하기 때문이다.
JS는 그저 동적으로 HTML 요소를 추가하는 역할을 할 뿐, 경로 해석에는 관여하지 않는다!
따라서 innerHTML로 추가한 이미지 태그의 경로도 HTML 파일의 위치를 기준으로 처리된다
😶🌫️결론
이번 문제를 해결하면서 JavaScript의 innerHTML을 사용해 동적으로 이미지를 추가할 때, 이미지 경로는 JS 파일이 아닌 HTML 파일을 기준으로 작성해야 한다는 점을 알게 되었다.
처음에는 HTML 코드를 JS 파일 내로 innerHTML 방식으로 옮기며 파일이 이동되었으니 이미지 경로도 js 기준으로 바꿔야한다고 생각하여 혼란을 겪었지만, 경로의 기준을 이해한 뒤 문제를 해결할 수 있었다.
이 경험을 통해 기술적 디테일에 대한 이해가 없으면 간단한 실수도 큰 문제로 이어질 수 있다는 점을 배웠다.
특히, 브라우저가 DOM을 렌더링하는 방식이나 경로를 처리하는 원리를 이해한 것이 얼마나 중요한지 깨닫게 되었다.
앞으로 코드를 작성할 때 기본 동작 원리를 먼저 생각하고, 발생한 문제를 체계적으로 분석하며 해결 방안을 찾는 과정을 꾸준히 이어가야겠다. 🤓
