Thẻ <img> HTML

Định nghĩa và cách sử dụng

<img> Thẻ được sử dụng để chèn hình ảnh vào trang HTML.

Trên thực tế, kỹ thuật không phải là chèn hình ảnh vào trang web mà là liên kết hình ảnh với trang web.<img> Thẻ tạo ra một khung chứa để tham chiếu hình ảnh.

<img> Thẻ có hai thuộc tính bắt buộc:

  • src - Định nghĩa đường dẫn của hình ảnh
  • alt - Nếu vì một lý do nào đó hình ảnh không thể hiển thị, hãy chỉ định văn bản thay thế cho hình ảnh

Lưu ý:Ngoài ra, luôn luôn cần chỉ định chiều rộng và chiều cao của hình ảnh. Nếu không chỉ định chiều rộng và chiều cao, trang có thể chớp sáng khi tải hình ảnh.

Lưu ý:Để liên kết hình ảnh với một tài liệu khác, chỉ cần đặt <img> Thẻ đệm trong <a> Trong thẻ (xem ví dụ dưới đây).

Xem thêm:

Giáo trình HTML:HTML Hình ảnh

Tài liệu tham khảo HTML DOM:Đối tượng Image

Giáo trình CSS:Cài đặt phong cách cho hình ảnh

Đọc thêm:Cách sử dụng hình ảnh một cách chính xác

Ví dụ

Ví dụ 1

Trong ví dụ sau, chúng ta chèn một bức ảnh tulip do kỹ sư của CodeW3C.com chụp tại Thị trường hoa tươi Thượng Hải vào trang web:

<img src="tulip.jpg" alt="Thị trường hoa tươi Thượng Hải - Tю lùp" />

Thử nghiệm trực tiếp

Thị trấn hoa Shang hai - Tulip

Ví dụ 2

Một ví dụ khác về cách chèn hình ảnh:

<img src="dancer.png" alt="Vũ công" width="500" height="749">

Thử nghiệm trực tiếp

Lưu ý:Cung cấp thêm ví dụ ở cuối trang.

Thuộc tính

Thuộc tính Giá trị Mô tả
alt Văn bản Định nghĩa văn bản thay thế cho hình ảnh.
crossorigin
  • anonymous
  • use-credentials
 Cho phép sử dụng hình ảnh từ các trang web thứ ba được phép truy cập qua domain khác cùng với canvas.
height Pixel Định nghĩa chiều cao của hình ảnh.
ismap ismap Định nghĩa hình ảnh là bản đồ hình ảnh trên máy chủ.
loading
  • eager
  • lazy
 Chỉ định xem trình duyệt có nên tải hình ảnh ngay lập tức hay trì hoãn tải hình ảnh cho đến khi满足某些条件.
longdesc URL Định nghĩa URL chỉ đến mô tả chi tiết của hình ảnh.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • unsafe-url
 Định nghĩa thông tin tham chiếu cần sử dụng khi tải hình ảnh.
sizes Kích thước Định nghĩa kích thước hình ảnh của giao diện trang khác nhau.
src URL Định nghĩa đường dẫn của hình ảnh.
srcset URL-list Định nghĩa danh sách các tệp hình ảnh được sử dụng trong các trường hợp khác nhau.
usemap #mapname Định nghĩa hình ảnh là hình ảnh của client.
width Pixel Định nghĩa chiều rộng của hình ảnh.

Thuộc tính toàn cục

<img> Thẻ hỗ trợ Thuộc tính toàn cục trong HTML。

Thuộc tính sự kiện

<img> Thẻ hỗ trợ Thuộc tính sự kiện trong HTML。

Thử nghiệm thêm

Ví dụ 3

Canh chỉnh hình ảnh (sử dụng CSS):

<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:bottom">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:middle">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:top">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:right">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:left">

Thử nghiệm trực tiếp

Ví dụ 4

Thêm viền cho hình ảnh (sử dụng CSS):

<img src="flower.gif" alt="[#1#]" style="border:5px solid black">

Thử nghiệm trực tiếp

Ví dụ 5

Cung cấp các lề trái phải cho hình ảnh (sử dụng CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px">

Thử nghiệm trực tiếp

Ví dụ 6

Cung cấp các lề trên dưới cho hình ảnh (sử dụng CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:50px 0px">

Thử nghiệm trực tiếp

Ví dụ 7

Cách chèn hình ảnh từ thư mục khác hoặc từ trang web khác:

<img src="/photo/flower.gif" alt="Flower" width="180" height="180">
<img src="https://www.codew3c.com/photo/tree.png" alt="Tree" width="150" height="161">

Thử nghiệm trực tiếp

例子 8

如何给图片添加超链接：

<a href="https://www.codew3c.com">
<img src="w3logo.png" alt="codew3c.com" width="400" height="225">
</a>

Thử nghiệm trực tiếp

例子 9

如何创建带有可点击区域的图像映射。每个区域都是一个超链接：

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

Thử nghiệm trực tiếp

延伸阅读 - 如何正确地使用图像

HTML 和 XHTML 最引人注目的特征之一，就是能够在文档的文本中包括图像，既可以把图像作为文档的内在对象（内联图像），也可以将其作为一个可通过超链接下载的单独文档，或者作为文档的背景。

合理地在文档内容中加入图像（静态的或者具有动画效果的图标、照片、说明、绘画，等等）时，会使文档变得更加生动活泼，更加引人入胜，而且看上去更加专业，更具信息性并易于浏览。还可以专门使一个图像成为超链接的可视引导图。

然而，如果过度使用图像，文档就会变得支离破碎，混乱不堪，而且无法阅读，用户在下载和查看该页面时，更会增加很多不必要的等待时间。

请阅读下面的文章，学习 Web 上的两种主要图像格式：GIF 和 JPEG，以及如何正确地使用图像：

默认的 CSS 设置

大多数浏览器将使用以下默认值显示 <img> Thành phần:

img {
  display: inline-block;
}

Thử nghiệm trực tiếp

Hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ