|
HTML 문서안에 이미지를 삽입하였는데 인터넷에 올려 보면 위 왼쪽 그림과 같이 정상적으로 나타나야 하는데, 오른쪽 그림과 같이 배꼽표시만 나타나고 이미지는 표시되지 않는 경우가 있습니다.
위 왼쪽 그림에 사용된 이미지 태그는 아래와 같습니다.
<img src="http://www.sourcenara.com/img/ani1.gif" width="100" height="100">
위 오른쪽 그림에 사용된 이미지 태그는 아래와 같습니다.
<img src="../img/ani1.gif" width="100" height="100">
위 두장의 이미지는 같은 이미지입니다.
그런데, 왜 오른쪽의 이미지는 나타나지 않는것일까요?
위와 같은 상황에서 오른쪽 이미지가 나타나지 않는 것은 단 두가지 이유로 추측가능합니다.
../img/ani1.gif 이라는 파일 경로는 현재 보고 있는 이 HTML 문서가 들어있는 디렉토리의 한단계 상위 디렉토리에 img 라는 폴더가 있고 그 폴더안에 ani.gif 이라는 이미지를 불러들여서 표시한다는 것인데 ../img/ani1.gif 이라는 파일 경로가 잘못되었던가, 아니면 이와 같은 경로에 이미지가 존재하지 않는다는 것입니다.
반면 왼쪽의 이미지 파일 경로는 인터넷 절대경로인 http://www.sourcenara.com/img/ani1.gif 이란 경로를 사용하였는데, 이렇게 하면 현재 HTML 문서가 어디에 있건간에 http://www.sourcenara.com 웹서버의 img 라는 디렉토리 안에 ani.gif 파일만 존재한다면 정상적으로 표시됩니다.
위 왼쪽과 같은 이미지 경로를 일반적으로 절대경로라 하고, 위 오른쪽과 같은 경로를 상대경로라고 합니다.
어떤 경로를 사용하던 상관없지만 상대경로를 사용할 때는 현재 html 문서와 이미지 파일과의 상대한 경로가 바르게 기입되었는지 확인합니다.
위 오른쪽 이미지 ani.gif 은 현재 html 문서와 같은 디렉토리 안에 있는 img 라는 폴더안에 존재하는데 그렇다면 이미지의 경로를 상대경로로 설정하다면 어떻게 되어야 할까요?
<img src="img/ani1.gif" width="100" height="100">
과 같이 하면 정상적으로 이미지가 표시됩니다.
참고로 이미지가 표시되지 않는데에는 위와 같이 경로가 잘못되거나 그와 같은 경로에 이미지파일을 올려놓지 않아서 안타날 수도 있지만, 이미지의 파일명을 한글로 해서일 수도 있습니다.
가령 ani.gif 이란 파일이름을 알아보기 쉽게 한다고 하여, 에니메이션.gif 이라고 하여 저장하였다면 웹서버에서 한글 파일이름을 인식하지 못하는 경우가 있으므로, 이미지 경로가 맞다고 해도 위 오른쪽 그림과 같이 표시되지 않습니다.
그러므로, 파일이름은 한글이 아닌 영문으로 하는 습관을 들입니다.
또, 간혹 이미지의 경로를 file:///C:/Documents/~와 같이 자신의 컴퓨터 하드디스크 경로로 해놓고 웹상에 올려보니 나타나지 않는다고 하는 분들도 있는데 file 로 시작되는 경로는 자신의 컴퓨터를 가리키는 것이므로 자신의 컴퓨터에서만 볼 수 있지 타인의 컴퓨터에서는 배꼽표시로만 나타날뿐 볼 수가 없습니다.
아래는 상대경로의 이해를 돕기위한 설명입니다.
|
 |
1. 문서와 이미지가 같은 폴더에 존재 할 경우
src="./sn.gif"(혹은 src="sn.gif") 와 같이 표현 하는 경우에는 동일한 폴더(디렉토리) 속에 ex.htm파일과 sn.gif이미지가 동시에 존재하는 경우입니다. |
|
 |
2. 문서가 있는 폴더 아래에 이미지가 존재 할 경우
src="./img/sn.gif"(혹은 src="img/sn.gif") 와 같이 표현 하는 경우에는 sn.gif 이미지가web 아래 img에 존재하며, web에 있는 ex.htm문서를 열때 아래 층에있는 sn.gif그림을 불러 들일 때입니다. |
|
 |
3. 이미지가 파일보다 바로 위의 폴더에 존재 할경우
src="../sn.gif" 와 같이 표현 하는 경우에는 web에 있는 ex.htm문서를 열때, sn.gif가 web위치 보다 1단계 위에 존재할 경우입니다. |
|
 |
4. 이미지가 파일보다 상위(2단계) 폴더에 존재 할경우
src="../../sn.gif" 와 같이 표현 하는 경우에는 folder에 있는 ex.htm문서를 열때, sn.gif가 folder위치 보다 2단계 위에 존재 할 경우입니다. |
|
 |
5. 파일이 상위(2단계) 폴더에 있고, 이미지가 하위 폴더에 존재 할 경우
src="./web/img/sn.gif" (혹은src="web/img/sn.gif")와 표현 하는 경우에는 folder에는 있는 ex.htm문서를 열 때, sn.gif가 folder 위치 보다 2단계 아래에 존재 할 경우입니다. |
|
 |
6. 상위 폴더 바로 아래의 각각 폴더에 이미지와 파일이 따로 존재 할 경우
src="../img/sn.gif"와 같이 표현 하는 경우에는 folder에 있는 ex.htm문서를 열때, sn.gif가 folder위치와 다른 줄기에 존재할 경우 입니다. 즉 문서가 있는 폴더로 부터 1단계 위로 올라가서 다시 img아래에 sn.gif가 존재 하는 경우 입니다. |
|
 |
6. 여러개의 상위, 하위 각각 폴더에 이미지와 파일이 따로 존재 할 경우
src="../../../web/un-web/img/sn.gif" 와 같이 표현 하는 경우에는 folder3에 있는 ex.htm문서를 열때, sn.gif가 folder3위치와 다른 줄기에 존재할 경우 입니다. 즉 문서가 있는 폴더로 부터 3단계 위로 올라가서 다시 web그리고 un-web 마지막 폴더 img 아래에 sn.gif가 존재 하는 경우 입니다. 이렇게 이미지의 경로를 복잡하게 사용 하지 않으므로, 이러한 경우가 있다는 것만 알고 있으면 됩니다. |
|
