programming javascript

Làm cách nào để đặt img src trong JavaScript?

Tiêu chuẩn HTML không liệt kê định dạng hình ảnh nào sẽ hỗ trợ, vì vậy tác nhân người dùng có thể hỗ trợ các định dạng khác nhau

Ghi chú. Hướng dẫn định dạng và loại tệp hình ảnh cung cấp thông tin toàn diện về các định dạng hình ảnh và hỗ trợ trình duyệt web của chúng. Phần này chỉ là tóm tắt

Các định dạng tệp hình ảnh được sử dụng phổ biến nhất trên web là

APNG [Đồ họa mạng di động hoạt hình] — Lựa chọn tốt cho các chuỗi hoạt hình không mất dữ liệu [GIF kém hiệu quả hơn]
AVIF [Định dạng tệp hình ảnh AV1] — Lựa chọn tốt cho cả hình ảnh và hình ảnh động do hiệu suất cao
GIF [Định dạng trao đổi đồ họa] — Lựa chọn tốt cho hình ảnh và hoạt ảnh đơn giản
JPEG [Joint Photographic Expert Group image] — Lựa chọn tốt để nén ảnh tĩnh không mất dữ liệu [phổ biến nhất hiện nay]
PNG [Đồ họa mạng di động] — Lựa chọn tốt để nén ảnh tĩnh không mất dữ liệu [chất lượng tốt hơn một chút so với JPEG]
SVG [Scalable Vector Graphics] — Định dạng ảnh vector. Sử dụng cho các hình ảnh phải được vẽ chính xác ở các kích cỡ khác nhau
WebP [Web Picture format] — Sự lựa chọn tuyệt vời cho cả hình ảnh và hình ảnh động

Các định dạng như WebP và AVIF được khuyên dùng vì chúng hoạt động tốt hơn nhiều so với PNG, JPEG, GIF cho cả ảnh tĩnh và ảnh động. WebP được hỗ trợ rộng rãi trong khi AVIF thiếu hỗ trợ trong Safari

SVG vẫn là định dạng được đề xuất cho hình ảnh phải được vẽ chính xác ở các kích cỡ khác nhau

Lỗi tải hình ảnh

Nếu xảy ra lỗi trong khi tải hoặc hiển thị hình ảnh và trình xử lý sự kiện

8 đã được đặt trên sự kiện

9, trình xử lý sự kiện đó sẽ được gọi. Điều này có thể xảy ra trong một số tình huống, bao gồm

Thuộc tính
```
  
```
38 trống [
1] hoặc
2
URL
```
  
```
38 giống với URL của trang mà người dùng hiện đang truy cập
Hình ảnh bị hỏng theo một cách nào đó khiến nó không được tải
Siêu dữ liệu của hình ảnh bị hỏng theo cách không thể truy xuất kích thước của nó và không có kích thước nào được chỉ định trong thuộc tính của phần tử
```
  
```
40
Hình ảnh có định dạng không được tác nhân người dùng hỗ trợ

Thuộc tính

Phần tử này bao gồm các thuộc tính toàn cục

Xác định một mô tả văn bản thay thế của hình ảnh

Ghi chú. Trình duyệt không phải lúc nào cũng hiển thị hình ảnh. Có một số tình huống trong đó trình duyệt có thể không hiển thị hình ảnh, chẳng hạn như

Các trình duyệt không trực quan [chẳng hạn như những trình duyệt được sử dụng bởi những người khiếm thị]
Người dùng chọn không hiển thị hình ảnh [tiết kiệm băng thông, lý do riêng tư]
Hình ảnh không hợp lệ hoặc loại không được hỗ trợ

Trong những trường hợp này, trình duyệt có thể thay thế hình ảnh bằng văn bản trong thuộc tính

0 của phần tử. Vì những lý do này và những lý do khác, hãy cung cấp giá trị hữu ích cho

0 bất cứ khi nào có thể

Đặt thuộc tính này thành một chuỗi trống [_______28] cho biết rằng hình ảnh này không phải là một phần quan trọng của nội dung [nó là trang trí hoặc pixel theo dõi] và các trình duyệt không trực quan có thể bỏ qua hình ảnh đó khi hiển thị. Các trình duyệt trực quan cũng sẽ ẩn biểu tượng hình ảnh bị hỏng nếu

0 trống và hình ảnh không hiển thị được

Thuộc tính này cũng được sử dụng khi sao chép và dán hình ảnh vào văn bản hoặc lưu hình ảnh được liên kết vào dấu trang

Cho biết liệu việc tìm nạp hình ảnh có phải được thực hiện bằng yêu cầu CORS hay không. Dữ liệu hình ảnh từ hình ảnh hỗ trợ CORS được trả về từ yêu cầu CORS có thể được sử dụng lại trong phần tử

01 mà không bị đánh dấu là "bị nhiễm độc"

Nếu thuộc tính

1 không được chỉ định, thì một yêu cầu không phải CORS sẽ được gửi [không có tiêu đề yêu cầu

03] và trình duyệt đánh dấu hình ảnh là bị nhiễm độc và hạn chế quyền truy cập vào dữ liệu hình ảnh của nó, ngăn việc sử dụng nó trong các phần tử

Nếu thuộc tính

1 được chỉ định, thì một yêu cầu CORS sẽ được gửi [với tiêu đề yêu cầu

03];

Giá trị được phép

Yêu cầu CORS được gửi với thông tin xác thực bị bỏ qua [nghĩa là không có cookie, X. 509 hoặc tiêu đề yêu cầu

90]

Yêu cầu CORS được gửi kèm theo bất kỳ thông tin đăng nhập nào [nghĩa là cookie, X. 509 và tiêu đề yêu cầu

90]. Nếu máy chủ không chọn chia sẻ thông tin đăng nhập với trang gốc [bằng cách gửi lại tiêu đề phản hồi

93], thì trình duyệt sẽ đánh dấu hình ảnh là bị nhiễm độc và hạn chế quyền truy cập vào dữ liệu hình ảnh của nó

Nếu thuộc tính có giá trị không hợp lệ, trình duyệt sẽ xử lý nó như thể giá trị

09 đã được sử dụng. Xem thuộc tính cài đặt CORS để biết thêm thông tin

Cung cấp gợi ý giải mã hình ảnh cho trình duyệt. Giá trị được phép

Giải mã hình ảnh đồng bộ, để trình bày nguyên tử với nội dung khác

Giải mã hình ảnh không đồng bộ, để giảm độ trễ khi trình bày nội dung khác

Vỡ nợ. không ưu tiên cho chế độ giải mã. Trình duyệt quyết định điều gì là tốt nhất cho người dùng

Đánh dấu hình ảnh để quan sát bằng API

90. Giá trị đã cho trở thành mã định danh cho phần tử hình ảnh được quan sát. Xem thêm trang thuộc tính

92 Thử nghiệm

Cung cấp gợi ý về mức độ ưu tiên tương đối để sử dụng khi tìm nạp hình ảnh. Giá trị được phép

Báo hiệu tìm nạp có mức độ ưu tiên cao so với các hình ảnh khác

Báo hiệu tìm nạp có mức độ ưu tiên thấp so với các hình ảnh khác

Vỡ nợ. Tín hiệu tự động xác định mức độ ưu tiên tìm nạp so với các hình ảnh khác

Chiều cao nội tại của hình ảnh, tính bằng pixel. Phải là số nguyên không có hàng đơn vị

Ghi chú. Việc bao gồm

4 và

3 cho phép trình duyệt tính toán tỷ lệ khung hình của hình ảnh trước khi hình ảnh được tải. Tỷ lệ khung hình này được sử dụng để dự trữ không gian cần thiết để hiển thị hình ảnh, giảm thiểu hoặc thậm chí ngăn chặn sự thay đổi bố cục khi hình ảnh được tải xuống và vẽ lên màn hình. Giảm sự thay đổi bố cục là một thành phần chính của trải nghiệm người dùng tốt và hiệu suất web

Thuộc tính Boolean này chỉ ra rằng hình ảnh là một phần của bản đồ phía máy chủ. Nếu vậy, tọa độ nơi người dùng nhấp vào hình ảnh sẽ được gửi đến máy chủ

Ghi chú. Thuộc tính này chỉ được phép nếu phần tử

40 là hậu duệ của phần tử

91 với thuộc tính

92 hợp lệ. Điều này cung cấp cho người dùng không chỉ thiết bị điểm đến dự phòng

Cho biết cách trình duyệt sẽ tải hình ảnh

Tải hình ảnh ngay lập tức, bất kể hình ảnh hiện có trong chế độ xem hiển thị hay không [đây là giá trị mặc định]

Trì hoãn tải hình ảnh cho đến khi hình ảnh đạt đến khoảng cách được tính toán từ chế độ xem, như được xác định bởi trình duyệt. Mục đích là để tránh mạng và băng thông lưu trữ cần thiết để xử lý hình ảnh cho đến khi chắc chắn rằng nó sẽ cần thiết. Điều này thường cải thiện hiệu suất của nội dung trong hầu hết các trường hợp sử dụng điển hình

Ghi chú. Quá trình tải chỉ bị hoãn lại khi JavaScript được bật. Đây là một biện pháp chống theo dõi, bởi vì nếu tác nhân người dùng hỗ trợ tải từng phần khi tập lệnh bị tắt, thì trang web vẫn có thể theo dõi vị trí cuộn gần đúng của người dùng trong suốt một phiên, bằng cách đặt hình ảnh một cách chiến lược trong phần đánh dấu của trang sao cho

Một chuỗi cho biết người giới thiệu nào sẽ sử dụng khi tìm nạp tài nguyên

97. Tiêu đề
98 sẽ không được gửi
99. Tiêu đề
98 sẽ không được gửi tới nguồn gốc nếu không có TLS [HTTPS]
```
  
```
401. Người giới thiệu đã gửi sẽ được giới hạn ở nguồn gốc của trang giới thiệu. sơ đồ, máy chủ và cổng của nó
```
  
```
402. Liên kết giới thiệu được gửi đến các nguồn gốc khác sẽ được giới hạn ở lược đồ, máy chủ lưu trữ và cổng. Điều hướng trên cùng một gốc sẽ vẫn bao gồm đường dẫn
```
  
```
403. Một liên kết giới thiệu sẽ được gửi cho cùng một nguồn gốc, nhưng các yêu cầu có nhiều nguồn gốc sẽ không chứa thông tin liên kết giới thiệu
```
  
```
404. Chỉ gửi nguồn gốc của tài liệu dưới dạng liên kết giới thiệu khi mức bảo mật giao thức không thay đổi [HTTPS→HTTPS], nhưng không gửi nó tới đích kém an toàn hơn [HTTPS→HTTP]
```
  
```
405 [mặc định]. Gửi một URL đầy đủ khi thực hiện một yêu cầu có cùng nguồn gốc, chỉ gửi nguồn gốc khi mức độ bảo mật của giao thức không thay đổi [HTTPS→HTTPS] và không gửi tiêu đề tới đích kém an toàn hơn [HTTPS→HTTP]
```
  
```
406. Người giới thiệu sẽ bao gồm nguồn gốc và đường dẫn [chứ không phải đoạn, mật khẩu hoặc tên người dùng]. Giá trị này không an toàn vì nó làm rò rỉ nguồn gốc và đường dẫn từ tài nguyên được bảo vệ bằng TLS đến nguồn gốc không an toàn

Một hoặc nhiều chuỗi được phân tách bằng dấu phẩy, cho biết tập hợp kích thước nguồn. Mỗi kích thước nguồn bao gồm

Điều kiện truyền thông. Điều này phải được bỏ qua cho mục cuối cùng trong danh sách
Giá trị kích thước nguồn

Điều kiện phương tiện mô tả các thuộc tính của chế độ xem, không phải của hình ảnh. Ví dụ:

408 đề xuất sử dụng nguồn có chiều rộng 1000px, nếu chế độ xem không cao hơn 500px

Giá trị kích thước nguồn xác định kích thước hiển thị dự định của hình ảnh. Tác nhân người dùng sử dụng kích thước nguồn hiện tại để chọn một trong các nguồn được cung cấp bởi thuộc tính

6, khi các nguồn đó được mô tả bằng bộ mô tả chiều rộng [

400]. Kích thước nguồn đã chọn ảnh hưởng đến kích thước nội tại của hình ảnh [kích thước hiển thị của hình ảnh nếu không áp dụng kiểu dáng CSS]. Nếu thuộc tính

6 không có hoặc không chứa giá trị có mô tả chiều rộng thì thuộc tính

5 không có hiệu lực

URL hình ảnh. Bắt buộc đối với phần tử

40. Trên các trình duyệt hỗ trợ

38 được xử lý như một hình ảnh ứng cử viên với bộ mô tả mật độ pixel

407, trừ khi một hình ảnh có bộ mô tả mật độ pixel này đã được xác định trong

6 hoặc trừ khi

6 chứa bộ mô tả

400

Một hoặc nhiều chuỗi được phân tách bằng dấu phẩy, cho biết các nguồn hình ảnh có thể có để tác nhân người dùng sử dụng. Mỗi chuỗi bao gồm

Một URL tới một hình ảnh
Tùy chọn, khoảng trắng theo sau là một trong
- Một bộ mô tả chiều rộng [một số nguyên dương theo sau bởi
```
  
```
  400]. Bộ mô tả chiều rộng được chia cho kích thước nguồn được cung cấp trong thuộc tính
```
  
```
  5 để tính mật độ pixel hiệu quả
- Một bộ mô tả mật độ điểm ảnh [một số dấu phẩy động dương theo sau bởi
```
  
```
  384]

Nếu không có bộ mô tả nào được chỉ định, nguồn được gán bộ mô tả mặc định là

407

Việc kết hợp các bộ mô tả chiều rộng và bộ mô tả mật độ điểm ảnh trong cùng một thuộc tính

6 là không chính xác. Các bộ mô tả trùng lặp [ví dụ: hai nguồn trong cùng một

6 đều được mô tả bằng

388] cũng không hợp lệ

Nếu thuộc tính

6 sử dụng bộ mô tả chiều rộng, thì thuộc tính

5 cũng phải có mặt, nếu không bản thân

6 sẽ bị bỏ qua

Tác nhân người dùng chọn bất kỳ nguồn nào có sẵn theo quyết định của mình. Điều này cung cấp cho họ nhiều thời gian để điều chỉnh lựa chọn của họ dựa trên những thứ như sở thích của người dùng hoặc điều kiện băng thông. Xem ví dụ về hướng dẫn hình ảnh Responsive của chúng tôi

Chiều rộng nội tại của hình ảnh tính bằng pixel. Phải là số nguyên không có hàng đơn vị

URL một phần [bắt đầu bằng

04] của bản đồ hình ảnh được liên kết với phần tử

Ghi chú. Bạn không thể sử dụng thuộc tính này nếu phần tử

40 nằm bên trong phần tử

91 hoặc

Thuộc tính không dùng nữa

08 Không dùng nữa

Căn chỉnh hình ảnh với bối cảnh xung quanh. Sử dụng thuộc tính CSS

09 và/hoặc

10 thay cho thuộc tính này. Giá trị được phép

Tương đương với

12 hoặc

Tương đương với

Mặc định, tương đương với

17 hoặc

Tương đương với

23 Không dùng nữa

Chiều rộng của đường viền xung quanh hình ảnh. Thay vào đó, hãy sử dụng thuộc tính CSS

25 Không dùng nữa

Số pixel của khoảng trắng ở bên trái và bên phải của hình ảnh. Thay vào đó, hãy sử dụng thuộc tính CSS

27 Không dùng nữa

Một liên kết đến một mô tả chi tiết hơn của hình ảnh. Các giá trị có thể là một URL hoặc một phần tử

Ghi chú. Thuộc tính này được đề cập trong phiên bản W3C mới nhất, HTML 5. 2, nhưng đã bị xóa khỏi Tiêu chuẩn sống HTML của WHATWG. Nó có một tương lai không chắc chắn;

31 Không dùng nữa

Tên cho phần tử. Thay vào đó, hãy sử dụng thuộc tính

33 Không dùng nữa

Số pixel của khoảng trắng bên trên và bên dưới hình ảnh. Thay vào đó, hãy sử dụng thuộc tính CSS

Tạo kiểu với CSS

40 là phần tử được thay thế; . Bạn có thể đặt các thuộc tính như

23/

40,

41/

26,

4, v.v. trên một hình ảnh

40 không có đường cơ sở, vì vậy khi hình ảnh được sử dụng trong ngữ cảnh định dạng nội tuyến với

47, phần dưới cùng của hình ảnh sẽ được đặt trên đường cơ sở của văn bản

Bạn có thể sử dụng thuộc tính

48 để định vị hình ảnh trong hộp của phần tử và thuộc tính

49 để điều chỉnh kích thước của hình ảnh trong hộp [ví dụ: liệu hình ảnh có vừa với hộp hay lấp đầy hộp ngay cả khi cần phải cắt bớt]

Tùy thuộc vào loại của nó, một hình ảnh có thể có chiều rộng và chiều cao nội tại. Tuy nhiên, đối với một số loại hình ảnh, kích thước bên trong là không cần thiết. Ví dụ: hình ảnh SVG không có kích thước nội tại nếu phần tử gốc

50 của chúng không có bộ

3 hoặc

4 trên đó

ví dụ

văn bản thay thế

Ví dụ sau nhúng một hình ảnh vào trang và bao gồm văn bản thay thế cho khả năng truy cập

Đường kết nối tới hình ảnh

Ví dụ này được xây dựng dựa trên ví dụ trước, cho biết cách biến hình ảnh thành liên kết. Để làm như vậy, hãy lồng thẻ

40 vào bên trong thẻ

91. Bạn nên tạo văn bản thay thế mô tả tài nguyên mà liên kết đang trỏ tới, như thể bạn đang sử dụng liên kết văn bản thay thế

Sử dụng thuộc tính srcset

Trong ví dụ này, chúng tôi bao gồm thuộc tính

6 có tham chiếu đến phiên bản có độ phân giải cao của logo; . Hình ảnh được tham chiếu trong thuộc tính

38 được tính là một ứng cử viên

407 trong các tác nhân người dùng hỗ trợ

Sử dụng thuộc tính srcset và kích thước

Thuộc tính

38 bị bỏ qua trong tác nhân người dùng hỗ trợ

6 khi bao gồm bộ mô tả

400. Khi điều kiện phương tiện

63 phù hợp, hình ảnh rộng 200 pixel sẽ tải [nó là hình ảnh phù hợp nhất với

64], nếu không thì hình ảnh khác sẽ tải

Ghi chú. Để xem hoạt động thay đổi kích thước, hãy xem ví dụ trên một trang riêng biệt, để bạn thực sự có thể thay đổi kích thước khu vực nội dung

Mối quan tâm về bảo mật và quyền riêng tư

Mặc dù các yếu tố

40 có những cách sử dụng vô hại, nhưng chúng có thể gây ra những hậu quả không mong muốn đối với bảo mật và quyền riêng tư của người dùng. Xem tiêu đề Người giới thiệu. mối quan tâm về quyền riêng tư và bảo mật để biết thêm thông tin và giảm nhẹ

Mối quan tâm về khả năng tiếp cận

Tác giả mô tả thay thế có ý nghĩa

Giá trị của thuộc tính

0 phải mô tả rõ ràng và chính xác nội dung của hình ảnh. Nó không được mô tả sự hiện diện của chính hình ảnh hoặc tên tệp của hình ảnh. Nếu thuộc tính

0 bị bỏ qua một cách có chủ ý vì hình ảnh không có văn bản tương đương, hãy xem xét các phương pháp thay thế để trình bày nội dung mà hình ảnh đang cố gắng truyền đạt

Đừng

Làm

Khi thuộc tính

0 không có trên hình ảnh, một số trình đọc màn hình có thể thông báo tên tệp của hình ảnh thay thế. Đây có thể là một trải nghiệm khó hiểu nếu tên tệp không đại diện cho nội dung của hình ảnh

Cây quyết định thay thế • Hình ảnh • Hướng dẫn truy cập web WAI
văn bản thay thế. Hướng dẫn cơ bản — Axess Lab
Cách thiết kế văn bản thay thế tuyệt vời. Một lời giới thiệu. Deque
MDN Hiểu về WCAG, Hướng dẫn 1. 1 giải thích
Hiểu Tiêu chí Thành công 1. 1. 1. W3C Hiểu WCAG 2. 0

Xác định SVG dưới dạng hình ảnh

Do lỗi VoiceOver, VoiceOver không thông báo chính xác hình ảnh SVG dưới dạng hình ảnh. Bao gồm

69 cho tất cả các phần tử

40 với tệp nguồn SVG để đảm bảo các công nghệ hỗ trợ thông báo chính xác SVG dưới dạng nội dung hình ảnh

thuộc tính tiêu đề

Thuộc tính

71 không phải là sự thay thế chấp nhận được cho thuộc tính

0. Ngoài ra, tránh trùng lặp giá trị của thuộc tính

0 trong thuộc tính

71 được khai báo trên cùng một hình ảnh. Làm như vậy có thể khiến một số trình đọc màn hình thông báo mô tả hai lần, tạo ra trải nghiệm khó hiểu

Thuộc tính

71 cũng không nên được sử dụng làm thông tin chú thích bổ sung đi kèm với mô tả

0 của hình ảnh. Nếu hình ảnh cần chú thích, hãy sử dụng các phần tử

77 và

Giá trị của thuộc tính

71 thường được hiển thị cho người dùng dưới dạng chú giải công cụ, xuất hiện ngay sau khi con trỏ dừng di chuyển trên hình ảnh. Mặc dù điều này có thể cung cấp thông tin bổ sung cho người dùng, nhưng bạn không nên cho rằng người dùng sẽ nhìn thấy thông tin đó. người dùng có thể chỉ có bàn phím hoặc màn hình cảm ứng. Nếu bạn có thông tin đặc biệt quan trọng hoặc có giá trị đối với người dùng, hãy trình bày nội tuyến thông tin đó bằng một trong các phương pháp được đề cập ở trên thay vì sử dụng

Làm cách nào để đặt đường dẫn src hình ảnh trong JavaScript?

Sergey Podgornyy .

Then you can change the URL of an image:.

tài liệu. getElementById["myImg"]. src = "hackanm. gif"; Hoặc bạn có thể thay đổi src trong jQuery bằng cách

$["#my_image"]. attr["src","giây. jpg"]; Để đính kèm sự kiện này vào sự kiện title, bạn có thể viết. $['#my_image']

Làm cách nào để thêm thẻ img trong JavaScript?

Cho một phần tử HTML và nhiệm vụ là tạo một phần tử .

Tạo phần tử img trống bằng tài liệu. phương thức createElement[]

Sau đó đặt các thuộc tính của nó như [src, height, width, alt, title, v.v.]

Cuối cùng, chèn nó vào tài liệu

Làm cách nào để chèn src trong JavaScript?

Để bao gồm một tệp JavaScript bên ngoài, chúng ta có thể sử dụng thẻ script với thuộc tính src . Bạn đã sử dụng thuộc tính src khi sử dụng hình ảnh. Giá trị cho thuộc tính src phải là đường dẫn đến tệp JavaScript của bạn. Thẻ tập lệnh này phải được bao gồm giữa các thẻ

Chúng tôi có thể thay đổi src hình ảnh bằng JavaScript không?

Điều thú vị về JavaScript là bạn có thể sử dụng nó để thay đổi DOM theo chương trình . Điều này bao gồm khả năng thay đổi thuộc tính src của hình ảnh thành một giá trị mới, cho phép bạn thay đổi hình ảnh đang được tải.

Lỗi tải hình ảnh

Thuộc tính

Thuộc tính không dùng nữa

Tạo kiểu với CSS

ví dụ

văn bản thay thế

Đường kết nối tới hình ảnh

Sử dụng thuộc tính srcset

Sử dụng thuộc tính srcset và kích thước

Mối quan tâm về bảo mật và quyền riêng tư

Mối quan tâm về khả năng tiếp cận

Tác giả mô tả thay thế có ý nghĩa

Đừng

Làm

Xác định SVG dưới dạng hình ảnh

thuộc tính tiêu đề

Làm cách nào để đặt đường dẫn src hình ảnh trong JavaScript?

Làm cách nào để thêm thẻ img trong JavaScript?

Làm cách nào để chèn src trong JavaScript?

Chúng tôi có thể thay đổi src hình ảnh bằng JavaScript không?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề