Thêm hình ảnh vào GitHub README.md của bạn mà không cần lưu trữ bên ngoài

Thêm hình ảnh vào GitHub README.md của bạn mà không cần lưu trữ bên ngoài
Thêm hình ảnh vào GitHub README.md của bạn mà không cần lưu trữ bên ngoài
Arthur Petit
14:14:19 Thứ Sáu, 28 tháng 6, 2024

Nhúng hình ảnh trực tiếp vào GitHub README.md

Gần đây, tôi tham gia GitHub và bắt đầu lưu trữ một số dự án của mình ở đó. Một trong những nhiệm vụ tôi gặp phải là cần đưa hình ảnh vào tệp README của mình.

Mặc dù đang tìm kiếm giải pháp nhưng tất cả những gì tôi tìm thấy chỉ là đề xuất lưu trữ hình ảnh trên các dịch vụ web của bên thứ ba và liên kết tới chúng. Có cách nào để thêm hình ảnh trực tiếp mà không cần dựa vào hosting bên ngoài không?

Yêu cầu Sự miêu tả
base64.b64encode() Mã hóa dữ liệu nhị phân thành chuỗi Base64, hữu ích để nhúng hình ảnh trực tiếp vào Markdown.
.decode() Chuyển đổi byte Base64 thành chuỗi, sẵn sàng để nhúng vào HTML/Markdown.
with open("file", "rb") Mở tệp ở chế độ đọc nhị phân, cần thiết để đọc dữ liệu hình ảnh.
read() Đọc nội dung của một tập tin, được sử dụng ở đây để đọc dữ liệu hình ảnh để mã hóa.
write() Ghi dữ liệu vào một tệp, được sử dụng ở đây để xuất chuỗi được mã hóa Base64 thành tệp văn bản.
f-string Cú pháp Python để nhúng các biểu thức bên trong chuỗi ký tự, được sử dụng để nhúng hình ảnh được mã hóa vào thẻ img HTML.

Cách nhúng hình ảnh vào GitHub README.md

Các tập lệnh được cung cấp ở trên minh họa các phương pháp khác nhau để thêm hình ảnh vào tệp GitHub README.md của bạn mà không cần dựa vào dịch vụ lưu trữ của bên thứ ba. Kịch bản đầu tiên sử dụng base64.b64encode() để chuyển đổi hình ảnh thành chuỗi được mã hóa Base64. Phương pháp này rất hữu ích vì nó cho phép bạn nhúng hình ảnh trực tiếp vào tệp README. Các with open("image.png", "rb") Lệnh mở file ảnh ở chế độ đọc nhị phân, cho phép script đọc dữ liệu ảnh. Các encoded_string = base64.b64encode(image_file.read()).decode() dòng mã hóa dữ liệu hình ảnh thành chuỗi Base64 và giải mã nó thành định dạng phù hợp để nhúng vào HTML. Cuối cùng, tập lệnh ghi chuỗi được mã hóa này vào một tệp văn bản, được định dạng dưới dạng HTML nhãn.

Tập lệnh thứ hai trình bày cách sử dụng tính năng URL thô của GitHub để nhúng hình ảnh. Bằng cách tải hình ảnh của bạn trực tiếp lên kho lưu trữ và sao chép URL thô, bạn có thể tham chiếu URL này trong tệp README.md của mình. Lệnh ![Alt text](https://raw.githubusercontent.com/username/repo/branch/images/image.png) hướng dẫn cách định dạng liên kết hình ảnh trong Markdown. Phương pháp này đơn giản và không yêu cầu mã hóa bổ sung mà dựa vào hình ảnh có sẵn trong kho lưu trữ của bạn. Phương pháp thứ ba sử dụng đường dẫn tương đối để tham chiếu hình ảnh được lưu trữ trong kho lưu trữ của bạn. Sau khi tải hình ảnh của bạn lên một thư mục cụ thể, bạn có thể sử dụng đường dẫn tương đối ![Alt text](images/image.png) trong README.md của bạn. Cách tiếp cận này giữ cho các liên kết hình ảnh của bạn hoạt động trong các nhánh và nhánh khác nhau của kho lưu trữ, miễn là cấu trúc thư mục vẫn nhất quán.

Nhúng hình ảnh vào GitHub README.md bằng mã hóa Base64

Tập lệnh Python để mã hóa Base64

import base64
with open("image.png", "rb") as image_file:
    encoded_string = base64.b64encode(image_file.read()).decode()
with open("encoded_image.txt", "w") as text_file:
    text_file.write(f"<img src='data:image/png;base64,{encoded_string}'>")

Thêm hình ảnh vào GitHub README.md qua URL nội dung thô

Sử dụng tính năng URL thô của GitHub

1. Upload your image to the repository (e.g., /images/image.png)
2. Copy the raw URL of the image: https://raw.githubusercontent.com/username/repo/branch/images/image.png
3. Embed the image in your README.md:
![Alt text](https://raw.githubusercontent.com/username/repo/branch/images/image.png)

Nhúng hình ảnh vào README.md thông qua Markdown với đường dẫn tương đối

Sử dụng đường dẫn tương đối trong Markdown

1. Upload your image to the repository (e.g., /images/image.png)
2. Use the relative path in your README.md:
![Alt text](images/image.png)
3. Commit and push your changes to GitHub

Nhúng hình ảnh vào README.md bằng tác vụ GitHub

Một phương pháp khác để đưa hình ảnh vào tệp GitHub README.md của bạn mà không cần sử dụng dịch vụ lưu trữ của bên thứ ba là tự động hóa quy trình nhúng hình ảnh bằng GitHub Actions. GitHub Actions có thể tự động hóa quy trình làm việc trực tiếp trong kho lưu trữ của bạn. Ví dụ: bạn có thể tạo quy trình làm việc tự động chuyển đổi hình ảnh sang Base64 và cập nhật tệp README.md của mình. Cách tiếp cận này đảm bảo rằng mọi hình ảnh được thêm vào một thư mục cụ thể trong kho lưu trữ của bạn sẽ tự động được mã hóa và nhúng vào README.

Để thiết lập quy trình làm việc như vậy, bạn cần tạo tệp YAML trong .github/workflows thư mục kho lưu trữ của bạn. Tệp này sẽ xác định các bước của quy trình làm việc, bao gồm kiểm tra kho lưu trữ, chạy tập lệnh để mã hóa hình ảnh và thực hiện các thay đổi trở lại kho lưu trữ. Bằng cách tự động hóa quy trình này, bạn có thể cập nhật README.md những hình ảnh mới nhất mà không cần can thiệp thủ công, nâng cao hiệu quả và duy trì quy trình làm việc hợp lý.

Câu hỏi thường gặp về việc nhúng hình ảnh vào GitHub README.md

  1. Làm cách nào để tải hình ảnh lên kho GitHub của tôi?
  2. Bạn có thể tải hình ảnh lên bằng cách kéo và thả chúng vào chế độ xem tệp trên GitHub hoặc sử dụng git add lệnh theo sau là git commit Và số 8.
  3. Mã hóa Base64 là gì?
  4. Mã hóa Base64 chuyển đổi dữ liệu nhị phân thành định dạng văn bản bằng cách sử dụng các ký tự ASCII, khiến nó phù hợp để nhúng các tệp nhị phân như hình ảnh vào tài liệu văn bản.
  5. Làm cách nào tôi có thể lấy URL thô của hình ảnh trên GitHub?
  6. Nhấp vào hình ảnh trong kho lưu trữ của bạn, sau đó nhấp vào nút "Tải xuống". URL thô sẽ nằm trong thanh địa chỉ của trình duyệt của bạn.
  7. Tại sao nên sử dụng đường dẫn tương đối cho hình ảnh trong README.md?
  8. Đường dẫn tương đối đảm bảo rằng các liên kết hình ảnh vẫn hoạt động trong các nhánh và nhánh khác nhau của kho lưu trữ của bạn.
  9. Tôi có thể sử dụng Tác vụ GitHub để tự động nhúng hình ảnh không?
  10. Có, bạn có thể tạo quy trình làm việc bằng GitHub Actions để tự động mã hóa hình ảnh và cập nhật tệp README.md của mình.
  11. Tôi có cần bất kỳ quyền đặc biệt nào để sử dụng Tác vụ GitHub không?
  12. Miễn là bạn có quyền ghi vào kho lưu trữ, bạn có thể tạo và chạy quy trình công việc của GitHub Actions.
  13. Lợi ích của việc sử dụng mã hóa Base64 trong README.md là gì?
  14. Việc nhúng hình ảnh dưới dạng chuỗi được mã hóa Base64 sẽ giữ chúng độc lập trong tệp README.md, loại bỏ sự phụ thuộc vào việc lưu trữ hình ảnh bên ngoài.
  15. Tôi có thể nhúng ảnh GIF động vào README.md của mình không?
  16. Có, bạn có thể nhúng ảnh GIF động bằng các phương pháp tương tự được mô tả, bằng liên kết trực tiếp, mã hóa Base64 hoặc đường dẫn tương đối.

Suy nghĩ cuối cùng về việc nhúng hình ảnh vào README.md

Nhúng hình ảnh vào tệp GitHub README.md giúp tăng cường sự hấp dẫn trực quan và sự rõ ràng cho các dự án của bạn. Bằng cách sử dụng các phương pháp như mã hóa Base64, URL thô và đường dẫn tương đối, bạn có thể đưa hình ảnh vào một cách hiệu quả mà không cần phụ thuộc vào dịch vụ lưu trữ bên ngoài. Tự động hóa quy trình này với GitHub Actions giúp đơn giản hóa hơn nữa việc quản lý hình ảnh. Những chiến lược này giúp duy trì cách trình bày tác phẩm của bạn một cách chuyên nghiệp và bóng bẩy, làm cho kho lưu trữ của bạn trở nên hấp dẫn và giàu thông tin hơn.