HTML에 img 경로를 추가하는 방법

HTML의 img 태그에서 "src" 속성을 사용하여 "<img src="URL">" 구문으로 이미지의 URL을 지정하는 데 사용되는 img 이미지 경로를 추가할 수 있습니다. . URL은 "../image/*jpg/"와 같은 상대 경로일 수 있습니다. 또한 절대 경로, 즉 이미지 파일을 가리키는 전체 URL일 수도 있습니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

HTML 태그

태그는 HTML 페이지의 이미지를 정의합니다.

참고: 기술적으로 이미지는 HTML 페이지에 삽입되지 않지만 링크됩니다. 태그는 참조된 이미지에 대한 자리 표시자를 만듭니다.

HTML src 속성

img 태그의 src 속성은 필수입니다. 이미지의 URL을 지정합니다.

Syntax

<img src="URL">

참고: 웹페이지가 로드되면 브라우저는 웹 서버에서 이미지를 가져와서 페이지에 삽입합니다. 따라서 이미지가 관련 웹페이지와 동일한 지점에 있는지 확인하세요. 그렇지 않으면 방문자에게 깨진 링크 아이콘이 표시될 수 있습니다. 브라우저가 이미지를 찾을 수 없으면 깨진 링크 아이콘이 표시됩니다.

[추천 튜토리얼: "html 비디오 튜토리얼"]

HTML

1.jpg 파일에서 이미지 경로를 사용하는 방법( f 드라이브) 다른 디렉터리에 있음:

<img src="file:///f:/*jpg" width="300" height="120"/>

2. *.html 파일과 *.jpg 사진은 같은 디렉터리에 있음:

<img src=".jpg" width="300" height="120"/>

3. *.html 파일과 *.jpg 그림은 다른 디렉터리에 있음:

a 그림 *.jpg는 이미지 폴더에 있고, *html은 이미지와 같은 디렉토리에 있습니다:

 <img src="image/*jpg/"width="300" height="120"/>

b, 그림 *jpg는 이미지 폴더에 있고, *html은 connage 폴더에 있고, image와 connage는 다음 위치에 있습니다. 동일한 디렉터리:

<img src="../image/*jpg/"width="300" height="120"/>

4 사진이 인터넷에서 가져온 경우 절대 경로를 작성하세요.

<img src="http://image.baidu.com/pcindexhot"/width="300" height="120"/>

확장 정보:

절대 경로는 디렉터리의 절대 위치를 의미하며 직접 도달합니다. 일반적으로 드라이브 문자의 대상 위치 (루트 디렉터리)에서 시작하는 경로입니다.

파일 위치를 완벽하게 설명하는 경로는 절대 경로이며, 이는 웹 사이트의 루트 디렉터리를 기준으로 한 디렉터리 경로입니다. 절대 경로 이름은 트리 디렉토리 구조 상단의 루트 디렉토리부터 디렉토리 또는 파일까지 지정됩니다. 이는 지정될 디렉토리 또는 파일이 될 때까지 슬래시로 구분된 일련의 연속된 디렉토리로 구성됩니다. 또는 가리킬 파일. 절대라고 불리는 이유는 모든 웹 페이지가 동일한 파일을 참조할 때 사용되는 경로가 동일하다는 것을 의미합니다.

//绝对路径，指向一个因特网文件的完整 URL
<img src="https://img.php.cn/upload/article/202102/26/2021022610342015759.jpg" alt="flower">

상대 경로는 이 파일이 위치한 경로로 인해 발생하는 다른 파일(또는 폴더)과의 경로 관계를 말합니다. 상대 경로를 사용하면 많은 편리함을 얻을 수 있습니다. HTML 절대 경로는 도메인 이름이 있는 파일의 전체 경로를 나타냅니다.

//文件路径指向了位于当前网站根目录中 images 文件夹里的一个文件：
<img src="/images/picture.jpg" alt="flower">

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

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