Thuộc tính HTML <img> src

HTML <img> thẻ

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

Bắt buộc Thuộc tính HTML <img> src Thuộc tính quy định URL của hình ảnh.

Có hai cách để trong thuộc tính Thuộc tính HTML <img> src Định nghĩa và cách sử dụng

1. URL tuyệt đối - Liên kết đến hình ảnh được lưu trữ trên các trang web khác. Ví dụ:

src="https://www.codew3c.com/images/img_girl.jpg"

Lưu ý:Hình ảnh bên ngoài có thể bị bảo vệ bởi quyền sở hữu trí tuệ. Nếu bạn không có quyền sử dụng nó, bạn có thể vi phạm luật bản quyền. Ngoài ra, bạn không thể kiểm soát hình ảnh bên ngoài; nó có thể bị xóa hoặc thay đổi đột ngột.

2. URL tương đối - Liên kết đến hình ảnh được lưu trữ trong trang web nội bộ.

Ở đây, URL không bao gồm tên miền. Nếu URL không bắt đầu bằng dấu gạch chéo, nó sẽ tương đối với trang web hiện tại. Ví dụ:

src="img_girl.jpg".

Nếu URL bắt đầu bằng dấu gạch chéo, nó sẽ tương đối với tên miền. Ví dụ:

src="/images/img_girl.jpg".

Lưu ý:Có lẽ tốt nhất là sử dụng URL tương đối. Nếu bạn thay đổi tên miền, bạn sẽ không gặp phải đường dẫn bị gián đoạn.

Lưu ý:Nếu trình duyệt không tìm thấy hình ảnh, nó sẽ hiển thị biểu tượng liên kết bị hỏng và văn bản alt.

Lưu ý:Để sắp xếp lưu trữ tài liệu, tác giả thường sẽ lưu trữ tệp ảnh trong một thư mục riêng biệt và thường sẽ đặt tên thư mục là "pics" hoặc "images" hoặc tên tương tự. Trong tài liệu hướng dẫn trực tuyến của CodeW3C.com, kỹ sư của chúng tôi đã lưu trữ hầu hết các hình ảnh thường dùng trong thư mục có tên "i", "i" là viết tắt của "images", điều này giúp tối ưu hóa đường dẫn.

Mẫu

Trong ví dụ dưới đây, chúng tôi đã chèn một bức ảnh tulip được chụp bởi kỹ sư của CodeW3C.com tại Công viên hoa tươi ở Thượng Hải vào trang web, tên tệp ảnh là "eg_tulip.jpg", lưu trữ trong thư mục "i" trên máy chủ. Đây là mã nguồn:

<img src="/i/eg_tulip.jpg" />

Hiệu quả của mã trên:


Thử ngay

Lưu ý:Bạn có thể thử trong công cụ kiểm tra trực tuyến của chúng tôiThử ngayNếu bạn thay đổi tên tệp trong ví dụ thành "eg_chinarose.jpg", bạn sẽ thấy một bức ảnh hoa loa kèn. Như vậy:

Mã nguồn:

<img src="/i/eg_chinarose.jpg" />

Hiệu quả của mã trên:

Cú pháp

<img src="URL">

Giá trị thuộc tính

Giá trị Mô tả
URL

Định nghĩa URL của hình ảnh.

Giá trị có thể:

  • URL tuyệt đối - Chỉ định trang web khác (ví dụ: src="http://www.example.com/image.gif")
  • URL tương đối - Chỉ định tệp trong trang web (ví dụ: src="image.gif")

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ợ

HTML <img> thẻ