[HTML] img 태그 속성과 상대경로

---

-img 태그 속성-

• src (이미지를 읽어올 경로)
• alt (이미지를 읽어올 수 없을 때 문구 표시)
• width, height
• loading (이미지를 읽어오는 방식)

---

-src 상대경로-

• ./ (html문서 위치)
• ../ (상위 폴더)

 

imeges 폴더 아래에 image-product.jpg 라는 파일이 있는 경우 예시

 

1. html문서 기준 상위 폴더에 이미지파일이 있을 때

 

<img src="../image-product.jpg" alt="No images">
or
<img src="../images/image-product.jpg" alt="No images">

상위 폴더에 바로 이미지 파일이 있는 경우와 상위 폴더의 다른 폴더에 이미지파일이 있는 경우

 

 

2. html문서 기준 하위 폴더에 이미지파일이 있을 때

 

<img src="./images/image-product.jpg" alt="No images">

./은 생략 가능

 

 

3. html문서 기준 같은 폴더에 이미지파일이 있을 때

 

<img src="image-product.jpg" alt="No images">

이미지파일명을 바로 적을 수 있음