새로운 질서 위키

이미지가 사라진 웹 페이지 고치기

HTML에서 이미지가 안 보일 때는 파일이 어디에 있고 웹 브라우저가 어디를 찾는지부터 비교한다. 이미지 파일이 멀쩡해도 문서의 위치가 바뀌면 상대 경로가 달라진다. 아래는 직접 만든 그림으로 문제를 작게 재현하는 방법이다.

먼저 보이는 상태 만들기

  1. 새 폴더 안에 images 폴더와 index.html 파일을 만든다.
  2. 직접 만든 SVG를 images/chair.svg로 저장한다. 그림이 없다면 아래 한 줄을 일반 텍스트로 저장해 쓸 수 있다.
  3. 그 아래 HTML을 index.html에 저장하고 브라우저에서 연다. 의자 그림이 보이는지 확인한다.
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path d="M60 30V120H150M60 95H140V170M70 120V170" fill="none" stroke="black" stroke-width="8"/></svg>
<!doctype html>
<html lang="ko">
<meta charset="utf-8">
<title>의자 사진 대신 의자 그림</title>
<h1>빈 의자</h1>
<img src="images/chair.svg" alt="검은 선으로 그린 빈 의자" width="200" height="200">
</html>

일부러 사라지게 했다가 고치기

  1. index.html 옆에 pages 폴더를 만들고 HTML 파일만 그 안으로 옮긴다.
  2. 옮긴 파일을 열면 images/chair.svg는 이제 pages/images/chair.svg를 가리킨다. 그 자리에 파일이 없으므로 그림을 가져오지 못한다. 출발점은 원래 열었던 파일이 아니라 지금 열어둔 HTML 파일이다.
  3. src="images/chair.svg"를 src="../images/chair.svg"로 바꾼다. ..는 한 단계 위 폴더로 올라가라는 뜻이다.
  4. 다시 저장하고 새로 고쳐 그림이 돌아오는지 확인한다. 웹 서버로 옮긴 뒤에는 대소문자 차이도 확인한다.

옮긴 뒤의 폴더는 아래처럼 놓인다. chair.svg를 HTML 옆으로 또 복사하지 않아도 경로를 고칠 수 있다. 파일을 옮기기 전에 그리는 지도라고 생각하면 조금 덜 헤맨다.

연습 폴더/
├── images/
│   └── chair.svg
└── pages/
    └── index.html

alt는 파일 이름 대신 이미지의 내용을 설명한다. 이미지 오류를 고치는 것과 대체 텍스트를 쓰는 것은 함께 할 수 있지만 서로 대신하지는 않는다. 다른 컴퓨터에서만 깨지는 문제는 파일 이름의 대소문자 함정에 이어 적을 수 있다.

참고

#HTML #이미지 #수선 #만들기

검색