Làm cách nào để hiển thị hình ảnh trong thư mục trong html?

Tôi đang tạo một trang web có thanh trượt hình ảnh (băng chuyền con cú) và tôi đang tìm một phương pháp hay để nhanh chóng đưa tất cả hình ảnh vào HTML của mình

Tôi hy vọng như vậy, rằng có một phương pháp thay thế để nhập hình ảnh, bởi vì tôi có khoảng 40 hình ảnh và thêm nó bằng tay, bằng tay, sẽ rất tẻ nhạt

Các bạn có thể giúp tôi bằng cách gợi ý cho tôi biết một ứng dụng hoặc trang web đang tạo hay bất kỳ thứ gì không?

(Tôi đang sử dụng Webstorm, nhưng tôi không tìm thấy bất kỳ tính năng tương ứng nào trong đó. )

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 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 /images vào nguồn, trình duyệt sẽ tìm kiế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à ". ” 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 duy nhất

<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