Nguon: Microsoft Learn · .NET 8.0

Image Tag Helper (Tag Helper Hình ảnh) trong ASP.NET Core

Nguồn: Image Tag Helper in ASP.NET Core

Tác giả: Peter Kellner

Image Tag Helper nâng cao thẻ <img> để cung cấp hành vi cache-busting (phá vỡ bộ nhớ đệm) cho các file hình ảnh tĩnh.

Cache-busting string (chuỗi phá vỡ bộ nhớ đệm) là một giá trị duy nhất đại diện cho hash (giá trị băm) của file hình ảnh tĩnh, được nối vào URL của tài nguyên. Chuỗi duy nhất này thúc đẩy client (máy khách) (và một số proxy) tải lại hình ảnh từ web server máy chủ thay vì từ bộ nhớ đệm của client.

Nếu nguồn hình ảnh (src) là một file tĩnh trên web server máy chủ:

Để có tổng quan về Tag Helpers, xem Tag Helpers in ASP.NET Core.

Các thuộc tính của Image Tag Helper

src

Để kích hoạt Image Tag Helper, thuộc tính src là bắt buộc trên phần tử <img>.

Nguồn hình ảnh (src) phải trỏ đến một file tĩnh vật lý trên server. Nếu src là một URI từ xa, query string parameter cache-busting sẽ không được tạo ra.

asp-append-version

Khi asp-append-version được chỉ định với giá trị true cùng với thuộc tính src, Image Tag Helper được kích hoạt.

Ví dụ dưới đây sử dụng Image Tag Helper:

cshtml
<img src="~/images/asplogo.png" asp-append-version="true">

Nếu file tĩnh tồn tại trong thư mục /wwwroot/images/, HTML được tạo ra sẽ tương tự như sau (hash sẽ khác nhau):

html
<img src="/images/asplogo.png?v=Kl_dqr9NVtnMdsM2MUg4qthUnWZm5T1fCEimBPWDNgM">

Giá trị được gán cho tham số v là giá trị hash của file asplogo.png trên ổ đĩa. Nếu web server không thể lấy quyền đọc đối với file tĩnh, không có tham số v nào được thêm vào thuộc tính src trong markup được kết xuất.

Để Tag Helper tạo version cho file tĩnh bên ngoài wwwroot, xem Serve files from multiple locations.

Hành vi hash caching (lưu trữ hash)

Image Tag Helper sử dụng cache provider (nhà cung cấp bộ nhớ đệm) trên web server cục bộ để lưu trữ hash Sha512 đã tính toán của một file cụ thể. Nếu file được yêu cầu nhiều lần, hash sẽ không được tính lại. Bộ nhớ đệm bị vô hiệu hóa bởi một file watcher (trình theo dõi file) được gắn vào file khi hash Sha512 của file được tính toán. Khi file thay đổi trên ổ đĩa, một hash mới sẽ được tính toán và lưu vào bộ nhớ đệm.