HTML 페이지에 이미지를 추가하는 세 가지 방법에 대한 자세한 그래픽 설명
- yulia원래의
- 2018-10-08 10:24:5933869검색
페이지 레이아웃 중에 페이지에 그림을 삽입해야 하는 경우가 많습니다. HTML에 그림을 추가하는 방법을 알고 계시나요? 이 기사에서는 HTML 페이지에 그림을 삽입하는 세 가지 방법을 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.
방법 1. HTML에서 img 태그를 사용하여 그림 추가
가장 간단하고 일반적으로 사용되는 방법은 img 태그를 직접 사용하는 것이며 필요에 따라 그림의 크기를 설정할 수 있습니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <img src="/static/imghwm/default1.png" data-src="img/picture1.jpg" class="lazy" / style="max-width:90%" height="180px" alt="HTML 페이지에 이미지를 추가하는 세 가지 방법에 대한 자세한 그래픽 설명" > </body> </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 = '<img src="/static/imghwm/default1.png" data-src="img/picture1.jpg" class="lazy" style="max-width:90%" style="max-width:90%" / alt="HTML 페이지에 이미지를 추가하는 세 가지 방법에 대한 자세한 그래픽 설명" >'; </script>
Picture 효과는 방법 1과 동일합니다.
위에서는 HTML 페이지에 그림을 추가하는 세 가지 방법을 소개합니다. 일반적으로 img 태그를 사용하여 그림을 추가하지만 때로는 JavaScript를 사용하여 그림을 동적으로 삽입할 수도 있습니다. 프로젝트의 필요에 따라 다릅니다. . 초보자도 직접 시도해 볼 수 있으니 도움이 되길 바랍니다!
위 내용은 HTML 페이지에 이미지를 추가하는 세 가지 방법에 대한 자세한 그래픽 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!