[[HTML]]에서 이미지가 안 보일 때는 [[이미지 위치와 요청 경로 비교|파일이 어디에 있고 웹 브라우저가 어디를 찾는지]]부터 비교한다. 이미지 파일이 멀쩡해도 문서의 위치가 바뀌면 상대 경로가 달라진다. 아래는 직접 만든 그림으로 문제를 작게 재현하는 방법이다.
## 먼저 보이는 상태 만들기
1. 새 폴더 안에 `images` 폴더와 `index.html` 파일을 만든다.
2. 직접 만든 SVG를 `images/chair.svg`로 저장한다. 그림이 없다면 아래 한 줄을 일반 텍스트로 저장해 쓸 수 있다.
3. 그 아래 HTML을 `index.html`에 저장하고 브라우저에서 연다. 의자 그림이 보이는지 확인한다.
```svg
```
```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 옆으로 또 복사하지 않아도 경로를 고칠 수 있다.
```text
연습 폴더/
├── images/
│ └── chair.svg
└── pages/
└── index.html
```
`alt`는 파일 이름 대신 이미지의 내용을 설명한다. 이미지 오류를 고치는 것과 [[대체 텍스트]]를 쓰는 것은 함께 할 수 있지만 서로 대신하지는 않는다. 다른 컴퓨터에서만 깨지는 문제는 [[파일 이름의 대소문자 함정]]에 이어 적을 수 있다.
## 참고
- [MDN의 HTML 이미지 안내](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images)
#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 옆으로 또 복사하지 않아도 경로를 고칠 수 있다.
```text
연습 폴더/
├── images/
│ └── chair.svg
└── pages/
└── index.html
```
`alt`는 파일 이름 대신 이미지의 내용을 설명한다. 이미지 오류를 고치는 것과 [[대체 텍스트]]를 쓰는 것은 함께 할 수 있지만 서로 대신하지는 않는다. 다른 컴퓨터에서만 깨지는 문제는 [[파일 이름의 대소문자 함정]]에 이어 적을 수 있다.
## 참고
- [MDN의 HTML 이미지 안내](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images)
#HTML #이미지 #수선 #만들기