Cách lấy src của hình ảnh trong HTML

Question

Bạn có thể mô phỏng việc có thuộc tính

<img src="images/dinosaur.jpg" alt="Dinosaur" />

4 bằng cách sử dụng thuộc tính

<img src="images/dinosaur.jpg" alt="Dinosaur" />

5 trong CSS và chuyển vào đường dẫn hình ảnh

<img src="images/dinosaur.jpg" alt="Dinosaur" />

6

Nội dung chính Show

Một giải pháp tốt hơn
Sự kết luận
Làm thế nào để chúng tôi đặt một hình ảnh trên một trang web?
văn bản thay thế
Chiều rộng và chiều cao
Tiêu đề hình ảnh
học tích cực. nhúng một hình ảnh
Chú thích hình ảnh với số liệu và chú thích hình
học tích cực. tạo hình
Ảnh nền CSS
Kiểm tra kỹ năng của bạn
Bản tóm tắt
Làm cách nào tôi có thể nhận được giá trị src của hình ảnh?
IMG src trong HTML là gì?
Hình ảnh src có thể là URL không?
IMG src hoạt động như thế nào?

Ví dụ: nếu bạn muốn mô phỏng việc thay đổi thuộc tính

<img src="images/dinosaur.jpg" alt="Dinosaur" />

4 của

<img src="images/dinosaur.jpg" alt="Dinosaur" />

8 thành

1, bạn có thể thực hiện điều này

	img {
    content: url("/path/here/to/image.png");
}

Điều này có thể hiệu quả trong một số trường hợp, nhưng nó không được khuyến khích, đặc biệt là vì có một giải pháp tốt hơn

Một giải pháp tốt hơn

Cách tốt hơn để thêm thuộc tính

<img src="images/dinosaur.jpg" alt="Dinosaur" />

4 vào một

<img src="images/dinosaur.jpg" alt="Dinosaur" />

8 là sử dụng nhắm mục tiêu CSS để thêm một

4. Lưu ý ở đây là bạn cần biết và cung cấp kích thước của hình ảnh

Đây là cách nhắm mục tiêu

<img src="images/dinosaur.jpg" alt="Dinosaur" />

8 và thêm một

4, với hình ảnh có kích thước

7 của

8

	img[src*="/path/here/to/image.png"] {
    background-image: url("/path/here/to/image.png");
    width: 20rem;
    height: 10rem;
    padding: 10rem 0 0 0;
}

Khi bạn làm điều đó, bạn sẽ thấy hình ảnh trong trình duyệt mà không cần thay đổi thuộc tính

<img src="images/dinosaur.jpg" alt="Dinosaur" />

4

Sự kết luận

Nếu bạn không muốn thay đổi thuộc tính

<img src="images/dinosaur.jpg" alt="Dinosaur" />

4 của một

<img src="images/dinosaur.jpg" alt="Dinosaur" />

8 thành một hình ảnh khác bằng HTML, bạn có hai giải pháp để hình ảnh hiển thị trong trình duyệt bằng CSS

Ban đầu, Web chỉ là văn bản và nó thực sự khá nhàm chán. May mắn thay, không lâu sau, khả năng nhúng hình ảnh (và các loại nội dung thú vị khác) vào trong các trang web đã được thêm vào. Có nhiều loại đa phương tiện khác để xem xét, nhưng thật hợp lý khi bắt đầu với phần tử khiêm tốn

<img src="images/dinosaur.jpg" alt="Dinosaur" />

6, được sử dụng để nhúng một hình ảnh đơn giản vào một trang web. Trong bài viết này, chúng ta sẽ xem xét cách sử dụng nó một cách chuyên sâu, bao gồm những điều cơ bản, chú thích nó bằng chú thích bằng cách sử dụng

<img src="images/dinosaur.jpg" alt="Dinosaur" />

7 và nêu chi tiết cách nó liên quan đến hình nền CSS

điều kiện tiên quyết. Trình độ máy tính cơ bản, cài đặt phần mềm cơ bản, kiến thức cơ bản về làm việc với các tệp, quen thuộc với các nguyên tắc cơ bản về HTML (như được trình bày trong Bắt đầu với HTML. )Khách quan. Để tìm hiểu cách nhúng hình ảnh đơn giản vào HTML, hãy chú thích chúng bằng chú thích và cách hình ảnh HTML liên quan đến hình nền CSS

Làm thế nào để chúng tôi đặt một hình ảnh trên một trang web?

Để đặt một hình ảnh đơn giản trên một trang web, chúng tôi sử dụng phần tử

<img src="images/dinosaur.jpg" alt="Dinosaur" />

6. Đây là một phần tử void (có nghĩa là nó không thể có bất kỳ nội dung con nào và không thể có thẻ kết thúc) yêu cầu hai thuộc tính hữu ích.

<img src="images/dinosaur.jpg" alt="Dinosaur" />

9 và

	img {
    content: url("/path/here/to/image.png");
}

10. Thuộc tính

<img src="images/dinosaur.jpg" alt="Dinosaur" />

9 chứa URL trỏ đến hình ảnh bạn muốn nhúng vào trang. Như với thuộc tính

	img {
    content: url("/path/here/to/image.png");
}

12 cho các phần tử

	img {
    content: url("/path/here/to/image.png");
}

13, thuộc tính

<img src="images/dinosaur.jpg" alt="Dinosaur" />

9 có thể là một URL tương đối hoặc một URL tuyệt đối. Không có thuộc tính

<img src="images/dinosaur.jpg" alt="Dinosaur" />

9, phần tử

	img {
    content: url("/path/here/to/image.png");
}

16 không có hình ảnh để tải

Thuộc tính

	img {
    content: url("/path/here/to/image.png");
}

10 được mô tả bên dưới

Ghi chú. Bạn nên đọc Sơ lược nhanh về URL và đường dẫn để nhớ lại các URL tương đối và tuyệt đối trước khi tiếp tục

Vì vậy, ví dụ: nếu hình ảnh của bạn có tên là

	img {
    content: url("/path/here/to/image.png");
}

18 và nó nằm trong cùng thư mục với trang HTML của bạn, thì bạn có thể nhúng hình ảnh như vậy

0

Nếu hình ảnh nằm trong thư mục con

	img {
    content: url("/path/here/to/image.png");
}

19, nằm trong cùng thư mục với trang HTML, thì bạn sẽ nhúng nó như thế này

<img src="images/dinosaur.jpg" alt="Dinosaur" />

Và như thế

Ghi chú. Công cụ tìm kiếm cũng đọc tên tệp hình ảnh và tính chúng cho SEO. Do đó, bạn nên đặt cho hình ảnh của mình một tên tệp mô tả;

Ví dụ: bạn có thể nhúng hình ảnh bằng URL tuyệt đối của nó

	img {
    content: url("/path/here/to/image.png");
}

1

Nhưng điều này không được khuyến khích. Bạn nên lưu trữ hình ảnh của riêng mình, điều này trong các thiết lập đơn giản có nghĩa là giữ hình ảnh cho trang web của bạn trên cùng một máy chủ với HTML của bạn. Trong các thiết lập nâng cao hơn, bạn có thể sử dụng CDN (Mạng phân phối nội dung) để phân phối hình ảnh của mình

Cảnh báo. Không bao giờ trỏ thuộc tính src của bạn vào một hình ảnh được lưu trữ trên trang web của người khác mà không được phép. Điều này được gọi là "liên kết nóng". Nó thường được coi là phi đạo đức, vì người khác sẽ trả chi phí băng thông để phân phối hình ảnh khi ai đó truy cập trang của bạn. Nó cũng khiến bạn không kiểm soát được liệu hình ảnh có bị xóa hay thay thế bằng thứ gì đó đáng xấu hổ hay không

Nói chung, bạn nên lưu trữ những hình ảnh bạn muốn sử dụng trên trang web của mình. Hãy nhớ rằng nhiều hình ảnh bạn có thể tìm thấy trên web có bản quyền. Trước khi bạn lưu trữ một hình ảnh, bạn nên đảm bảo rằng một trong những điều này được áp dụng

Bạn sở hữu hình ảnh
Bạn đã nhận được sự cho phép rõ ràng bằng văn bản từ chủ sở hữu hình ảnh
Trên thực tế, bạn có nhiều bằng chứng cho thấy hình ảnh thuộc phạm vi công cộng

Mã trên của chúng tôi sẽ cho chúng tôi kết quả sau

Ghi chú. Các phần tử như

<img src="images/dinosaur.jpg" alt="Dinosaur" />

6 và

43 đôi khi được gọi là các phần tử được thay thế. Điều này là do nội dung và kích thước của phần tử được xác định bởi một tài nguyên bên ngoài (như tệp hình ảnh hoặc video), chứ không phải bởi nội dung của chính phần tử đó. Bạn có thể đọc thêm về chúng tại Các phần tử đã thay thế

Ghi chú. Bạn có thể tìm thấy ví dụ đã hoàn thành từ phần này đang chạy trên GitHub (cũng xem mã nguồn. )

văn bản thay thế

Thuộc tính tiếp theo chúng ta sẽ xem xét là

	img {
    content: url("/path/here/to/image.png");
}

10. Giá trị của nó được cho là mô tả bằng văn bản của hình ảnh, để sử dụng trong các trường hợp không thể xem/hiển thị hình ảnh hoặc mất nhiều thời gian để hiển thị do kết nối internet chậm. Ví dụ, mã trên của chúng tôi có thể được sửa đổi như vậy

4

Cách dễ nhất để kiểm tra văn bản

	img {
    content: url("/path/here/to/image.png");
}

10 của bạn là cố tình viết sai chính tả tên tệp của bạn. Ví dụ: nếu tên hình ảnh của chúng tôi được đánh vần là

46, trình duyệt sẽ không hiển thị hình ảnh và thay vào đó sẽ hiển thị văn bản thay thế

Vì vậy, tại sao bạn lại thấy hoặc cần văn bản thay thế?

Người dùng bị khiếm thị và đang sử dụng trình đọc màn hình để đọc trang web cho họ nghe. Trên thực tế, việc có sẵn văn bản thay thế để mô tả hình ảnh là hữu ích đối với hầu hết người dùng
Như đã mô tả ở trên, chính tả của tệp hoặc tên đường dẫn có thể sai
Trình duyệt không hỗ trợ loại hình ảnh. Một số người vẫn sử dụng trình duyệt chỉ có văn bản, chẳng hạn như Lynx, hiển thị văn bản thay thế của hình ảnh
Bạn có thể muốn cung cấp văn bản cho các công cụ tìm kiếm sử dụng;
Người dùng đã tắt hình ảnh để giảm khối lượng truyền dữ liệu và giảm phiền nhiễu. Điều này đặc biệt phổ biến trên điện thoại di động và ở các quốc gia có băng thông hạn chế hoặc đắt đỏ

Chính xác thì bạn nên viết gì bên trong thuộc tính

	img {
    content: url("/path/here/to/image.png");
}

10 của mình? . Nói cách khác, bạn sẽ mất gì nếu hình ảnh của bạn không hiển thị

trang trí. Bạn nên sử dụng ảnh nền CSS cho hình ảnh trang trí, nhưng nếu bạn phải sử dụng HTML, hãy thêm một khoảng trống
```
	
```
48. Nếu hình ảnh không phải là một phần của nội dung, trình đọc màn hình không nên lãng phí thời gian để đọc nó
Nội dung. Nếu hình ảnh của bạn cung cấp thông tin quan trọng, hãy cung cấp thông tin tương tự trong một văn bản ngắn gọn
```
	img {
    content: url("/path/here/to/image.png");
}
```
10 – hoặc thậm chí tốt hơn, trong văn bản chính mà mọi người có thể nhìn thấy. Đừng viết văn bản
```
	img {
    content: url("/path/here/to/image.png");
}
```
10 dư thừa. Người dùng sáng mắt sẽ khó chịu như thế nào nếu tất cả các đoạn được viết hai lần trong nội dung chính?
liên kết. Nếu bạn đặt hình ảnh bên trong thẻ
```
	img {
    content: url("/path/here/to/image.png");
}
```
13, thì để biến hình ảnh thành liên kết, bạn vẫn phải cung cấp văn bản liên kết có thể truy cập được. Trong những trường hợp như vậy, bạn có thể viết nó bên trong cùng một thành phần
```
	img {
    content: url("/path/here/to/image.png");
}
```
13 hoặc bên trong thuộc tính
```
	img {
    content: url("/path/here/to/image.png");
}
```
10 của hình ảnh – tùy thuộc vào trường hợp nào phù hợp nhất với bạn
Chữ. Bạn không nên đưa văn bản của mình vào hình ảnh. Ví dụ: nếu tiêu đề chính của bạn cần một bóng đổ, hãy sử dụng CSS cho điều đó thay vì đặt văn bản vào một hình ảnh. Tuy nhiên, nếu bạn thực sự không thể tránh làm điều này, bạn nên cung cấp văn bản bên trong thuộc tính
```
	img {
    content: url("/path/here/to/image.png");
}
```
10

Về cơ bản, điều quan trọng là mang lại trải nghiệm có thể sử dụng được, ngay cả khi không thể nhìn thấy hình ảnh. Điều này đảm bảo tất cả người dùng không bỏ lỡ bất kỳ nội dung nào. Hãy thử tắt hình ảnh trong trình duyệt của bạn và xem mọi thứ như thế nào. Bạn sẽ sớm nhận ra văn bản thay thế hữu ích như thế nào nếu không thể nhìn thấy hình ảnh

Ghi chú. Để biết thêm thông tin, hãy xem hướng dẫn của chúng tôi về Các lựa chọn thay thế văn bản

Chiều rộng và chiều cao

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

16 và

17 để chỉ định chiều rộng và chiều cao của hình ảnh của mình. Bạn có thể tìm thấy chiều rộng và chiều cao của hình ảnh theo một số cách. Ví dụ: trên Mac, bạn có thể sử dụng Cmd + I để hiển thị thông tin cho tệp hình ảnh. Quay trở lại ví dụ của chúng tôi, chúng tôi có thể làm điều này

1

Điều này không dẫn đến nhiều khác biệt cho màn hình, trong các trường hợp bình thường. Nhưng nếu hình ảnh không được hiển thị, chẳng hạn như người dùng vừa điều hướng đến trang và hình ảnh chưa được tải, bạn sẽ nhận thấy trình duyệt đang để lại một khoảng trống để hình ảnh xuất hiện trong đó.

Đây là một điều nên làm, dẫn đến việc tải trang nhanh hơn và mượt mà hơn

Tuy nhiên, bạn không nên thay đổi kích thước hình ảnh của mình bằng các thuộc tính HTML. Nếu bạn đặt kích thước hình ảnh quá lớn, bạn sẽ nhận được hình ảnh có hạt, mờ hoặc quá nhỏ và lãng phí băng thông khi tải xuống hình ảnh không phù hợp với nhu cầu của người dùng. Hình ảnh cũng có thể trông bị méo nếu bạn không duy trì tỷ lệ khung hình chính xác. Bạn nên sử dụng trình chỉnh sửa hình ảnh để đặt hình ảnh của mình ở kích thước chính xác trước khi đưa nó lên trang web của bạn

Ghi chú. Nếu bạn cần thay đổi kích thước của hình ảnh, bạn nên sử dụng CSS để thay thế

Tiêu đề hình ảnh

Đối với các liên kết, bạn cũng có thể thêm thuộc tính

18 vào hình ảnh để cung cấp thêm thông tin hỗ trợ nếu cần. Trong ví dụ của chúng tôi, chúng tôi có thể làm điều này

5

Điều này cung cấp cho chúng tôi chú giải công cụ khi di chuột, giống như tiêu đề liên kết

Tuy nhiên, điều này không được khuyến nghị —

18 có một số vấn đề về khả năng truy cập, chủ yếu dựa trên thực tế là hỗ trợ trình đọc màn hình rất khó đoán và hầu hết các trình duyệt sẽ không hiển thị trừ khi bạn di chuột (vì vậy e. g. không có quyền truy cập vào người dùng bàn phím). Nếu bạn muốn biết thêm thông tin về điều này, hãy đọc Thử thách và khổ nạn của thuộc tính tiêu đề của Scott O'Hara

Tốt hơn là bao gồm thông tin hỗ trợ như vậy trong văn bản chính của bài viết, thay vì đính kèm với hình ảnh

học tích cực. nhúng một hình ảnh

Bây giờ đến lượt bạn chơi. Phần học tích cực này sẽ giúp bạn bắt đầu và chạy với một bài tập nhúng đơn giản. Bạn được cung cấp một thẻ

<img src="images/dinosaur.jpg" alt="Dinosaur" />

6 cơ bản;

8

Trước đó chúng tôi đã nói không bao giờ liên kết nóng đến hình ảnh trên các máy chủ khác, nhưng điều này chỉ nhằm mục đích học tập, vì vậy chúng tôi sẽ bỏ qua điều này một lần

Chúng tôi cũng muốn bạn

Thêm một số văn bản thay thế và kiểm tra xem nó có hoạt động không bằng cách viết sai chính tả URL hình ảnh
Đặt hình ảnh đúng là
```
	
```
16 và
```
	
```
17 (gợi ý. nó rộng 200px và cao 171px), sau đó thử nghiệm với các giá trị khác để xem hiệu ứng là gì
Đặt một
```
	
```
18 trên hình ảnh

Nếu bạn mắc lỗi, bạn luôn có thể đặt lại bằng nút Đặt lại. Nếu bạn thực sự gặp khó khăn, hãy nhấn nút Hiển thị giải pháp để xem câu trả lời

2

3

4

Chú thích hình ảnh với số liệu và chú thích hình

Nói về chú thích, có một số cách bạn có thể thêm chú thích đi kèm với hình ảnh của mình. Ví dụ, sẽ không có gì ngăn cản bạn làm điều này

<img src="images/dinosaur.jpg" alt="Dinosaur" />

0

cái này ổn. Nó chứa nội dung bạn cần và có thể tạo kiểu độc đáo bằng CSS. Nhưng có một vấn đề ở đây. không có gì liên kết ngữ nghĩa hình ảnh với chú thích của nó, điều này có thể gây ra sự cố cho trình đọc màn hình. Ví dụ: khi bạn có 50 hình ảnh và chú thích, chú thích nào đi với hình ảnh nào?

Một giải pháp tốt hơn là sử dụng các phần tử HTML

<img src="images/dinosaur.jpg" alt="Dinosaur" />

7 và

55. Chúng được tạo ra cho chính xác mục đích này. để cung cấp một vùng chứa ngữ nghĩa cho các hình và để liên kết rõ ràng hình với chú thích. Ví dụ trên của chúng tôi có thể được viết lại như thế này

<img src="images/dinosaur.jpg" alt="Dinosaur" />

1

Phần tử

55 cho trình duyệt và công nghệ hỗ trợ biết rằng chú thích mô tả nội dung khác của phần tử

<img src="images/dinosaur.jpg" alt="Dinosaur" />

7

Ghi chú. Từ quan điểm về khả năng tiếp cận, chú thích và văn bản

	img {
    content: url("/path/here/to/image.png");
}

10 có vai trò riêng biệt. Chú thích mang lại lợi ích cho cả những người có thể nhìn thấy hình ảnh, trong khi văn bản

	img {
    content: url("/path/here/to/image.png");
}

10 cung cấp chức năng giống như hình ảnh vắng mặt. Do đó, chú thích và văn bản

	img {
    content: url("/path/here/to/image.png");
}

10 không nên nói cùng một điều, bởi vì cả hai đều xuất hiện khi hình ảnh biến mất. Hãy thử tắt hình ảnh trong trình duyệt của bạn và xem nó trông như thế nào

Một hình không nhất thiết phải là một hình ảnh. Nó là một đơn vị nội dung độc lập mà

Thể hiện ý nghĩa của bạn một cách cô đọng, dễ nắm bắt
Có thể xuất hiện ở một số vị trí trong luồng tuyến tính của trang
Cung cấp thông tin cần thiết hỗ trợ văn bản chính

Một hình có thể là một số hình ảnh, đoạn mã, âm thanh, video, phương trình, bảng hoặc thứ gì đó khác

học tích cực. tạo hình

Trong phần học tích cực này, chúng tôi muốn bạn lấy đoạn mã đã hoàn thành từ phần học tích cực trước đó và biến nó thành một hình

Bọc nó trong một phần tử

<img src="images/dinosaur.jpg" alt="Dinosaur" />

7

Sao chép văn bản ra khỏi thuộc tính
```
	
```
18, xóa thuộc tính
```
	
```
18 và đặt văn bản bên trong thành phần
```
	
```
55 bên dưới hình ảnh

Nếu bạn mắc lỗi, bạn luôn có thể đặt lại bằng nút Đặt lại. Nếu bạn thực sự gặp khó khăn, hãy nhấn nút Hiển thị giải pháp để xem câu trả lời

<img src="images/dinosaur.jpg" alt="Dinosaur" />

2

3

<img src="images/dinosaur.jpg" alt="Dinosaur" />

4

Ảnh nền CSS

Bạn cũng có thể sử dụng CSS để nhúng hình ảnh vào trang web (và JavaScript, nhưng đó hoàn toàn là một câu chuyện khác). Thuộc tính CSS

85 và các thuộc tính

86 khác được sử dụng để kiểm soát vị trí hình nền. Ví dụ: để đặt một hình nền trên mỗi đoạn trên một trang, bạn có thể làm điều này

<img src="images/dinosaur.jpg" alt="Dinosaur" />

5

Hình ảnh nhúng kết quả được cho là dễ định vị và kiểm soát hơn so với hình ảnh HTML. Vậy tại sao phải bận tâm với hình ảnh HTML? . Nếu bạn chỉ muốn thêm một cái gì đó đẹp đẽ vào trang của mình để nâng cao hình ảnh, thì điều này là tốt. Mặc dù, những hình ảnh như vậy không có ý nghĩa ngữ nghĩa nào cả. Chúng không thể có bất kỳ văn bản tương đương nào, không hiển thị với trình đọc màn hình, v.v. Đây là nơi hình ảnh HTML tỏa sáng

Tổng hợp. nếu một hình ảnh có ý nghĩa, về mặt nội dung của bạn, bạn nên sử dụng một hình ảnh HTML. Nếu hình ảnh chỉ mang tính chất trang trí, bạn nên sử dụng hình nền CSS

Ghi chú. Bạn sẽ tìm hiểu thêm về hình nền CSS trong chủ đề CSS của chúng tôi

Kiểm tra kỹ năng của bạn

Bạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . hình ảnh HTML

Bản tóm tắt

Đó là tất cả cho bây giờ. Chúng tôi có hình ảnh và chú thích chi tiết. Trong bài viết tiếp theo, chúng ta sẽ tiến dần lên, xem xét cách sử dụng HTML để nhúng nội dung video và âm thanh vào các trang web

Làm cách nào tôi có thể nhận được giá trị src của hình ảnh?

Mã JavaScript để lấy giá trị thuộc tính src của thẻ img HTML . var img_src = document. getElementById("my-img"). src; . log(img_src);

IMG src trong HTML là gì?

Thẻ Chỉ định đường dẫn đến hình ảnh . alt - Chỉ định một văn bản thay thế cho hình ảnh, nếu hình ảnh vì lý do nào đó không thể hiển thị.

Hình ảnh src có thể là URL không?

Thuộc tính . Giá trị thuộc tính. Nó chứa URL giá trị duy nhất chỉ định liên kết của hình ảnh nguồn. Có hai loại liên kết URL được liệt kê bên dưới. URL tuyệt đối. Nó trỏ đến một trang web khác.

IMG src hoạt động như thế nào?

Thuộc tính src chứa URL trỏ đến hình ảnh bạn muốn nhúng vào trang . Cũng như thuộc tính href cho phần tử

programming html

Cách lấy src của hình ảnh trong HTML

Một giải pháp tốt hơn

Sự kết luận

Làm thế nào để chúng tôi đặt một hình ảnh trên một trang web?

văn bản thay thế

Chiều rộng và chiều cao

Tiêu đề hình ảnh

học tích cực. nhúng một hình ảnh

Chú thích hình ảnh với số liệu và chú thích hình

học tích cực. tạo hình

Ảnh nền CSS

Kiểm tra kỹ năng của bạn

Bản tóm tắt

Làm cách nào tôi có thể nhận được giá trị src của hình ảnh?

IMG src trong HTML là gì?

Hình ảnh src có thể là URL không?

IMG src hoạt động như thế nào?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội