Làm cách nào để đặt hình ảnh vào thư mục html?

Trong ví dụ sau, đường dẫn tệp trỏ đến một tệp trong thư mục hình ảnh nằm ở thư mục gốc của trang web hiện tại

Trong ví dụ sau, đường dẫn tệp trỏ đến một tệp trong thư mục hình ảnh nằm trong thư mục hiện tại

Trong ví dụ sau, đường dẫn tệp trỏ đến một tệp trong thư mục hình ảnh nằm trong thư mục tăng một cấp so với thư mục hiện tại


Thực hành tốt nhất

Cách tốt nhất là sử dụng đường dẫn tệp tương đối (nếu có thể)

Khi sử dụng đường dẫn tệp tương đối, các trang web của bạn sẽ không bị ràng buộc với URL cơ sở hiện tại của bạn. Tất cả các liên kết sẽ hoạt động trên máy tính của riêng bạn (máy chủ cục bộ) cũng như trên miền công cộng hiện tại và miền công cộng trong tương lai của bạn

Bạn đã thấy bất kỳ trang web mà không có hình ảnh? . Hãy tìm hiểu cách bạn có thể thêm hình ảnh vào tài liệu HTML

Web hiện đại phụ thuộc rất nhiều vào hình ảnh có liên quan đến nội dung trang web vì điều này giúp cải thiện giao diện trang web và giúp người đọc hiểu nội dung tốt hơn

Một trang web có thể chứa nhiều hình ảnh thường được sắp xếp trong các thư mục con và thư mục. Vì vậy, điều quan trọng là phải tìm hiểu, cách bạn có thể đưa hình ảnh vào tệp HTML từ một thư mục

Thẻ HTML

Bạn có thể bao gồm một hình ảnh trong HTML bằng cách sử dụng thẻ HTML

img <src="flowers.jpg" alt="A Flower Bouquet"/>

tải hình ảnh và đặt nó trên trang web. Nó có 2 thuộc tính quan trọng

  • src - Chỉ định vị trí nguồn mà trình duyệt sẽ tìm tệp hình ảnh. Sau khi nhận được tệp hình ảnh, nó sẽ tải hình ảnh trên trang web. Chúng tôi có thể sử dụng URL (Bộ định vị tài nguyên thống nhất) để hiển thị hình ảnh từ một trang web khác
  • alt - Chỉ định văn bản chúng tôi cần hiển thị nếu hình ảnh không có sẵn hoặc nếu hệ thống không thể tải hình ảnh. Văn bản này cũng giúp khách khuyết tật sử dụng trình đọc màn hình

Cách đặt nguồn hình ảnh trong HTML

Hãy tìm hiểu thêm một chút về cách bạn chỉ định nguồn của hình ảnh

Trường hợp cơ bản là chỉ định tên tệp của hình ảnh mà bạn muốn đặt trong tài liệu HTML

<img src="flowers.jpg" alt="A Flower Bouquet"/>

Trình duyệt sẽ tìm hình ảnh trong cùng thư mục mà bạn đã đặt tài liệu HTML

Nếu hình ảnh nằm trong một thư mục hoặc thư mục con, bạn cũng cần đưa nó vào nguồn

<img src="/images/flowers.jpg" alt="A Flower Bouquet"/>

Sau khi bạn đã thêm chuỗi

<img src="flowers.jpg" alt="A Flower Bouquet"/>
2 vào nguồn, trình duyệt sẽ tìm hình ảnh
<img src="flowers.jpg" alt="A Flower Bouquet"/>
0 trong đó thay vì thư mục hiện tại

Cách thêm hình ảnh vào HTML từ một vị trí từ xa

Hình ảnh mà bạn sử dụng trong các trang HTML của mình không nhất thiết phải được đặt bên cạnh chúng. Bạn có thể dễ dàng thêm hình ảnh từ các vị trí từ xa (các trang web hoặc kho lưu trữ tệp khác) bằng URL

<img src="https://learn.coderslang.com/js-test-8.png" alt="JavaScript test"/>

Cách sử dụng “. " hoặc ". ” làm nguồn hình ảnh trong HTML

Bạn có thể hướng dẫn trình duyệt tìm kiếm hình ảnh trong thư mục hiện tại bằng cách sử dụng dấu chấm đơn

<img src="flowers.jpg" alt="A Flower Bouquet"/>
1 trong thuộc tính
<img src="flowers.jpg" alt="A Flower Bouquet"/>
2

<img src= "./flowers.jpg" alt="A Flower Bouquet"/>

Hoặc, nếu bạn muốn di chuyển một thư mục lên trên, bạn sử dụng hai dấu chấm

<img src="flowers.jpg" alt="A Flower Bouquet"/>
3 để yêu cầu trình duyệt bắt đầu tìm kiếm hình ảnh ở trên thư mục hiện tại một cấp

Trong HTML, thẻ được sử dụng để thêm hình ảnh từ thư mục vào tài liệu HTML. Đường dẫn ảnh được chỉ định bởi thuộc tính src của thẻ . Để chỉ định đường dẫn, trước tiên hãy viết tên thư mục, sau đó là dấu gạch chéo ngược “/” và cuối cùng, viết tên hình ảnh cùng với phần mở rộng của nó. Trong bài viết này, chúng tôi đã cung cấp các thông tin liên quan đến quá trình thêm một hình ảnh trong HTML từ một thư mục.