HTML 페이지에 이미지를 추가하는 세 가지 방법에 대한 자세한 그래픽 설명-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML 페이지에 이미지를 추가하는 세 가지 방법에 대한 자세한 그래픽 설명

yulia

Oct 08, 2018 am 10:24 AM

페이지 레이아웃 중에 페이지에 그림을 삽입해야 하는 경우가 많습니다. HTML에 그림을 추가하는 방법을 알고 계시나요? 이 기사에서는 HTML 페이지에 그림을 삽입하는 세 가지 방법을 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

방법 1. HTML에서 img 태그를 사용하여 그림 추가

가장 간단하고 일반적으로 사용되는 방법은 img 태그를 직접 사용하는 것이며 필요에 따라 그림의 크기를 설정할 수 있습니다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
 </head>
 <body>
  <img  src="/static/imghw/default1.png"  data-src="img/picture1.jpg"  class="lazy"  /    style="max-width:90%" height="180px" alt="HTML 페이지에 이미지를 추가하는 세 가지 방법에 대한 자세한 그래픽 설명" >
 </body>
</html>

로그인 후 복사

렌더링:

HTML 페이지에 이미지를 추가하는 세 가지 방법에 대한 자세한 그래픽 설명

방법 2: JavaScript를 사용하여 img 요소를 생성하여 이미지 가져오기

먼저 img 요소를 생성한 다음 img 요소의 경로, 이미지의 길이와 너비를 설정하고,

<script type="text/javascript">
  var Image1 = document.createElement("img");    
  Image1.src = "img/picture1.jpg";      
  Image1.width = 300;    
  Image1.height = 180;    
  document.body.appendChild(Image1); 
 </script>

로그인 후 복사

방법 3: JavaScript에서 innerHTML을 사용하여 이미지를 동적으로 삽입합니다.

여전히 JavaScript의 방법을 사용하지만 본질은 방법 2와 유사합니다. 방법이 다릅니다. img 요소를 생성하여 HTML 페이지에 추가합니다. 코드는 다음과 같습니다.

<script type="text/javascript">
  document.body.innerHTML = &#39;<img  src="/static/imghw/default1.png"  data-src="img/picture1.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="HTML 페이지에 이미지를 추가하는 세 가지 방법에 대한 자세한 그래픽 설명" >&#39;;
</script>

로그인 후 복사

Picture 효과는 방법 1과 동일합니다.

위에서는 HTML 페이지에 그림을 추가하는 세 가지 방법을 소개합니다. 일반적으로 img 태그를 사용하여 그림을 추가하지만 때로는 JavaScript를 사용하여 그림을 동적으로 삽입할 수도 있습니다. 프로젝트의 필요에 따라 다릅니다. . 초보자도 직접 시도해 볼 수 있으니 도움이 되길 바랍니다!

위 내용은 HTML 페이지에 이미지를 추가하는 세 가지 방법에 대한 자세한 그래픽 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.