HTML에서 로컬 이미지 경로를 참조하는 방법

HTML에서 로컬 이미지 경로를 참조하는 방법: 1. 상대 경로를 사용합니다. 이미지와 HTML 파일이 동일한 폴더에 있는 경우 이미지의 파일 이름을 상대 경로로 직접 사용할 수 있습니다. . 절대 경로를 사용할 수 있습니다. 그러나 절대 경로는 다른 환경에서 문제를 일으킬 수 있으므로 이는 일반적으로 모범 사례가 아닙니다. 3. Base64 인코딩은 이미지를 텍스트 문자열로 변환하는 방법입니다. 데이터를 HTML에 직접 삽입할 수 있습니다.

이 문서의 운영 환경: Windows 10 시스템, Dell G3 컴퓨터.

HTML에서 로컬 이미지 경로를 참조하는 방법에는 여러 가지가 있으며, 아래에서 자세히 소개하겠습니다.

상대 경로 사용:

상대 경로는 현재 HTML 파일의 위치에 상대적인 경로입니다. 그림과 HTML 파일이 같은 폴더에 있는 경우 그림의 파일 이름을 상대 경로로 직접 사용할 수 있습니다. 예를 들어 이미지 파일 이름이 "image.jpg"인 경우 다음 코드를 사용하여 HTML에서 이미지를 참조할 수 있습니다.

<img src="image.jpg" alt="图片">

이미지 파일이 현재 HTML 파일의 상위 폴더에 있는 경우 ".../"를 사용하여 상위 폴더를 나타낼 수 있습니다. 예를 들어 이미지 파일이 상위 폴더의 "images" 폴더에 있는 경우 다음 코드를 사용하여 이미지를 참조할 수 있습니다.

<img src="../images/image.jpg" alt="图片">

마찬가지로 이미지 파일이 하위 폴더에 있는 경우 현재 HTML 파일의 경우 "./"를 사용하면 현재 폴더를 나타냅니다. 예를 들어, 이미지 파일이 현재 폴더의 "images" 폴더 아래에 있는 경우 다음 코드를 사용하여 이미지를 참조할 수 있습니다.

<img src="./images/image.jpg" alt="图片">

절대 경로 사용:

절대 경로는 전체 경로입니다. 루트 디렉터리부터 시작합니다. 절대 경로를 사용하여 로컬 이미지를 참조할 수 있지만 절대 경로는 다양한 환경에서 문제를 일으킬 수 있으므로 이는 일반적으로 모범 사례가 아닙니다. 그러나 절대 경로를 사용해야 하는 경우 다음 코드를 사용하여 이미지를 참조할 수 있습니다.

<img src="/path/to/image.jpg" alt="图片">

여기서 "/path/to/"는 루트 디렉터리에 대한 이미지 파일의 상대 경로입니다.

Base64 인코딩 사용:

Base64 인코딩은 이미지를 텍스트 문자열로 변환하는 방법으로, 이미지 데이터를 HTML에 직접 포함할 수 있습니다. 이 방법은 작은 이미지나 HTTP 요청을 줄여야 하는 경우에 적합합니다. 다음 코드를 사용하여 이미지를 Base64 인코딩으로 변환할 수 있습니다.

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAAAAAAD/4QA6RXhpZgAATU0AKgAAAAgABwEAAAQAAABsAAAABAAQAAA
EBAAABAAAAABsAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAB9KADAAQAAAABAAAB9AD/2wBDAAoHBwkHBgoJ

그 중 "data:image/jpeg;base64" 다음 부분이 이미지의 Base64 인코딩입니다. 이 방법을 사용하면 HTML 파일의 크기가 커지고 페이지 로딩 속도에 영향을 미칠 수 있습니다.

어떤 방법을 사용하든 지정된 경로에 이미지 파일이 있는지, 경로가 올바른지 확인해야 합니다. 또한 이미지 파일을 HTML 파일과 동일한 폴더에 두거나 관리 및 유지 관리를 더 쉽게 하기 위해 특수 이미지 폴더에 두는 것이 좋습니다.

위 내용은 HTML에서 로컬 이미지 경로를 참조하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!