Gần đây tôi đã tham gia GitHub . Tôi đã tổ chức một số dự án ở đó.

Tôi cần đưa một số hình ảnh vào Tệp README của mình. Tôi không biết làm thế nào để làm điều đó.

Tôi đã tìm kiếm về điều này, nhưng tất cả những gì tôi nhận được là một số liên kết cho tôi biết "lưu trữ hình ảnh trên web và chỉ định đường dẫn hình ảnh trong tệp README.md".

Có cách nào để làm điều này mà không lưu trữ hình ảnh trên bất kỳ dịch vụ lưu trữ web của bên thứ ba nào không?

Hãy thử đánh dấu này:

![alt text](http://url/to/img.png)

Tôi nghĩ bạn có thể liên kết trực tiếp đến phiên bản thô của hình ảnh nếu nó được lưu trữ trong kho lưu trữ của bạn. I E

![alt text](https://github.com/[username]/[reponame]/blob/[branch]/image.jpg?raw=true)

Bạn cũng có thể sử dụng các đường dẫn tương đối như

![Alt text](relative/path/to/img.jpg?raw=true "Title")

• Bạn có thể tạo một vấn đề mới
• tải lên (kéo và thả) hình ảnh lên nó
• Sao chép URL hình ảnh và dán nó vào tệp README.md của bạn.

đây là một video chi tiết trên YouTube giải thích điều này một cách chi tiết:

https://www.youtube.com/watch?v=nvPOUdz5PL4

Nó đơn giản hơn thế nhiều.

Chỉ cần tải hình ảnh của bạn lên thư mục gốc của kho lưu trữ và liên kết đến tên tệp mà không cần bất kỳ đường dẫn nào, như vậy:

![Screenshot](screenshot.png)

Bạn cũng có thể thêm hình ảnh với các thẻ HTML đơn giản :

<p align="center">
  <img src="your_relative_path_here" width="350" title="hover text">
  <img src="your_relative_path_here_number_2_large_name" width="350" alt="accessibility text">
</p>

Nhiều giải pháp được đăng không đầy đủ hoặc không theo sở thích của tôi.

• Một CDN bên ngoài như imgur thêm một công cụ khác vào chuỗi. Meh.
• Tạo một vấn đề giả trong trình theo dõi vấn đề là một hack. Nó tạo ra sự lộn xộn và gây nhầm lẫn cho người dùng. Thật đau đớn khi di chuyển giải pháp này sang một ngã ba hoặc tắt GitHub.
• Sử dụng nhánh gh-page làm cho các URL dễ vỡ. Một người khác làm việc trong dự án duy trì trang gh có thể không biết điều gì bên ngoài phụ thuộc vào đường dẫn đến những hình ảnh này. Chi nhánh gh-page có một hành vi cụ thể trên GitHub, không cần thiết để lưu trữ hình ảnh CDN.
• Theo dõi tài sản trong kiểm soát phiên bản là một điều tốt. Khi một dự án phát triển và thay đổi, đó là cách bền vững hơn để quản lý và theo dõi các thay đổi của nhiều người dùng.
• Nếu một hình ảnh áp dụng cho một phiên bản cụ thể của phần mềm, có thể tốt hơn là liên kết một hình ảnh bất biến. Bằng cách đó, nếu hình ảnh được cập nhật sau đó để phản ánh các thay đổi đối với phần mềm, bất kỳ ai đang đọc bản sửa đổi đó sẽ tìm thấy hình ảnh chính xác.

Giải pháp ưa thích của tôi, lấy cảm hứng từ ý chính này , là sử dụng một nhánh tài sản với permalinks để sửa đổi cụ thể .

git checkout --orphan assets
git reset --hard
cp /path/to/cat.png .
git add .
git commit -m 'Added cat picture'
git push -u origin assets
git rev-parse HEAD  # Print the SHA, which is optional, you'll see below.

Xây dựng một "permalink" để sửa đổi hình ảnh này và bọc nó trong Markdown.

Tuy nhiên, việc tra cứu SHA cam kết là bất tiện, do đó, khi một phím tắt nhấn Y để permalink vào một tệp trong một cam kết cụ thể như trang help.github này nói.

Để luôn hiển thị hình ảnh mới nhất trên nhánh tài sản, hãy sử dụng URL blob:

https://github.com/github/{repository}/blob/assets/cat.png 

(Từ cùng trang trợ giúp GitHub Chế độ xem tệp hiển thị phiên bản mới nhất trên một nhánh )

Cam kết hình ảnh của bạn ( image.png ) trong một thư mục ( Myfolder ) và thêm dòng sau đây trong bạn README.md :

![Optional Text](../master/myFolder/image.png)

• Tạo một vấn đề liên quan đến việc thêm hình ảnh
• Thêm hình ảnh bằng cách kéo và thả hoặc bằng trình chọn tệp

• Sau đó sao chép nguồn hình ảnh

• Bây giờ thêm ![alt tag](http://url/to/img.png)vào tệp README.md của bạn

Làm xong!

Ngoài ra, bạn có thể sử dụng một số trang web lưu trữ hình ảnh như imgurvà lấy url của nó và thêm nó vào tệp README.md của bạn hoặc bạn cũng có thể sử dụng một số lưu trữ tệp tĩnh.

Vấn đề mẫu

Tôi cần đưa một số hình ảnh vào Tệp README của mình. Tôi không biết làm thế nào để làm điều đó.

Tôi đã tạo một trình hướng dẫn nhỏ cho phép bạn tạo và tùy chỉnh các thư viện ảnh đơn giản cho readme của kho lưu trữ GitHub của bạn: Xem ReadmeGalleryCreatorForGitHub .

Trình hướng dẫn lợi dụng thực tế là GitHub cho phép các thẻ img xuất hiện trong README.md. Ngoài ra, trình hướng dẫn sử dụng thủ thuật phổ biến là tải hình ảnh lên GitHub bằng cách kéo chúng vào vùng vấn đề (như đã được đề cập trong một trong các câu trả lời trong chuỗi này).

Chỉ cần thêm một <img>thẻ vào README.md của bạn với src tương đối vào kho lưu trữ của bạn. Nếu bạn không sử dụng src tương đối, hãy đảm bảo máy chủ hỗ trợ CORS.

Nó hoạt động vì GitHub hỗ trợ nội tuyến-html

<img src="/docs/logo.png" alt="My cool logo"/>
# My cool project and above is the logo of it

Quan sát ở đây

Cú pháp cơ bản

![myimage-alt-tag](url-to-image)

Đây:

1. my-image-alt-tag: văn bản sẽ được hiển thị nếu hình ảnh không được hiển thị.
2. url-to-image: bất kể tài nguyên hình ảnh của bạn là gì. URI của hình ảnh

Thí dụ:

![stack Overflow](http://lmsotfy.com/so.png)

Điều này sẽ trông giống như sau:

Sử dụng bảng để nổi bật, nó sẽ mang lại sự quyến rũ riêng cho nó

Bảng Cú pháp là:

Tách từng ô cột bằng ký hiệu |

và tiêu đề bảng (hàng đầu tiên) của hàng thứ 2 bởi ---

| col 1 | col 2 |
| ------------ | ------------- |
| hình ảnh 1 | hình 2 |

đầu ra

Bây giờ chỉ cần đặt <img src="url/relativePath">ở hình ảnh 1 và hình ảnh 2 nếu bạn đang sử dụng hai hình ảnh

Lưu ý: nếu sử dụng nhiều hình ảnh chỉ bao gồm nhiều cột hơn, bạn có thể sử dụng thuộc tính chiều rộng và chiều cao để làm cho nó trông dễ đọc hơn.

Thí dụ

| col 1 | col 2 |
| ------------ | ------------- |
| <img src="https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_582,c_limit/so-logo-s.jpg" width="250"> | <img src="https://mk0jobadderjftub56m0.kinstacdn.com/wp-content/uploads/stackoverflow.com-300.jpg" width="250">|

Khoảng cách không quan trọng

Hình ảnh đầu ra

được giúp đỡ bởi: adam-p

Bạn chỉ có thể làm:

git checkout --orphan assets
cp /where/image/currently/located/on/machine/diagram.png .
git add .
git commit -m 'Added diagram'
git push -u origin assets

Sau đó, bạn chỉ có thể tham chiếu nó trong READMEtập tin như vậy:

![diagram](diagram.png)

Trong trường hợp của tôi, tôi sử dụng imgur và sử dụng liên kết trực tiếp theo cách này.

![img](http://i.imgur.com/yourfilename.png)

Bạn có thể liên kết đến hình ảnh trong dự án của mình từ README.md (hoặc bên ngoài) bằng liên kết CDN github thay thế.

URL sẽ trông như thế này:

https://cdn.rawgit.com/<USER>/<REPO>/<BRANCH>/<PATH>/<TO>/<FILE>

Tôi có một hình ảnh SVG trong dự án của mình và khi tôi tham chiếu nó trong tài liệu dự án Python của mình, nó không hiển thị.

Liên kết dự án

Đây là liên kết dự án với tệp (không hiển thị dưới dạng hình ảnh):

https://github.com/jongracecox/anybadge/blob/master/examples/awesomeness.svg

Ví dụ hình ảnh nhúng:

Liên kết thô

Đây là liên kết RAW đến tệp (vẫn không hiển thị dưới dạng hình ảnh):

https://raw.githubusercontent.com/jongracecox/anybadge/master/examples/awesomeness.svg

Ví dụ hình ảnh nhúng:

Liên kết CDN

Sử dụng liên kết CDN, tôi có thể liên kết đến tệp bằng cách sử dụng (hiển thị dưới dạng hình ảnh):

https://cdn.rawgit.com/jongracecox/anybadge/master/examples/awesomeness.svg

Ví dụ hình ảnh nhúng:

Đây là cách tôi có thể sử dụng hình ảnh từ dự án của mình trong cả README.mdtệp của mình và trong dự án PyPi của tôi tái cấu trúc tái cấu trúc ( tại đây )

Tôi đã giải quyết vấn đề này. Bạn chỉ cần tham khảo tệp readme của người khác.

Đầu tiên, bạn nên tải một tệp hình ảnh lên thư viện mã github! Sau đó tham chiếu trực tiếp đến địa chỉ của tập tin hình ảnh.

Tôi thường lưu trữ hình ảnh trên trang web, điều này có thể liên kết với bất kỳ hình ảnh được lưu trữ. Chỉ cần ném nó trong readme. Hoạt động cho .rstcác tập tin, không chắc chắn về.md

.. image:: https://url/path/to/image
   :height: 100px
   :width: 200 px
   :scale: 50 %

Trong trường hợp của tôi, tôi muốn hiển thị một màn hình in Githubnhưng cũng trên NPM. Mặc dù sử dụng đường dẫn tương đối đang hoạt động bên trong Github, nhưng nó không hoạt động bên ngoài nó. Về cơ bản, ngay cả khi tôi đã đẩy dự án của mình lên NPM(đơn giản là sử dụng tương tự readme.md, hình ảnh không bao giờ được hiển thị.

Tôi đã thử một vài cách, cuối cùng đây là những gì làm việc cho tôi:

![Preview](https://raw.githubusercontent.com/username/project/master/image-path/image.png)

Bây giờ tôi thấy hình ảnh của mình chính xác trên NPMhoặc bất cứ nơi nào khác mà tôi có thể xuất bản gói của mình.

Trong trường hợp bạn cần tải lên một số hình ảnh để làm tài liệu, một cách tiếp cận hay là sử dụng git-lfs . Khi bạn đã cài đặt git-lfs, hãy làm theo các bước sau:

1. Intialize git lfs cho từng loại hình ảnh của bạn:

   git lfs *.png
   git lfs *.svg
   git lfs *.gif
   git lfs *.jpg
   git lfs *.jpeg
   

2. Tạo một thư mục sẽ được sử dụng làm vị trí hình ảnh, ví dụ. doc. Trên các hệ thống dựa trên GNU / Linux và Unix, điều này có thể được thực hiện thông qua:

   cd project_folder
   mkdir doc
   git add doc
   

3. Sao chép dán bất kỳ hình ảnh vào thư mục doc. Sau đó thêm chúng thông qua git addlệnh.

4. Cam kết và thúc đẩy.

5. Các hình ảnh có sẵn công khai trong url sau:

   https://media.githubusercontent.com/media/ ^ github_username ^ / ^ repo ^ / ^ chi nhánh ^ / ^ image_location trong repo ^

Trong đó: * ^github_username^là tên người dùng trong github (bạn có thể tìm thấy nó trong trang hồ sơ) * ^repo_name^là tên kho lưu trữ * ^branch^là nhánh kho lưu trữ hình ảnh được tải lên * ^image_location in the repo^là vị trí bao gồm thư mục mà hình ảnh được lưu trữ.

Ngoài ra, bạn có thể tải lên hình ảnh trước sau đó truy cập vị trí trong trang github dự án của bạn và điều hướng cho đến khi bạn tìm thấy hình ảnh sau đó nhấn downloadnút và sau đó sao chép-dán url từ thanh địa chỉ của trình duyệt.

Nhìn điều này từ dự án của tôi như là tài liệu tham khảo.

Sau đó, bạn có thể sử dụng url để bao gồm chúng bằng cú pháp đánh dấu được đề cập ở trên:

![some alternate text that describes the image](^github generated url from git lfs^)

Ví dụ: Giả sử chúng tôi sử dụng ảnh này Sau đó bạn có thể sử dụng cú pháp đánh dấu:

![In what order to compile the files](https://media.githubusercontent.com/media/pc-magas/myFirstEnclave/master/doc/SGX%20Compile%20workflow.png)

CHỈ CẦN CÔNG VIỆC NÀY !!

quan tâm đến chữ hoa tên tệp của bạn trong thẻ và đặt tệp PNG vào, và liên kết đến tên tệp mà không có bất kỳ đường dẫn nào:

![Screenshot](screenshot.png)

Tôi chỉ mở rộng hoặc thêm một ví dụ cho câu trả lời đã được chấp nhận.

Một khi bạn đã đặt hình ảnh vào repo Github của bạn.

Sau đó:

• Mở repo Github tương ứng trên trình duyệt của bạn.
• Điều hướng đến tệp hình ảnh đích Sau đó chỉ cần mở hình ảnh trong một tab mới.
• Sao chép url
• Và cuối cùng chèn url vào mẫu sau ![alt text](https://raw.githubusercontent.com/username/projectname/branch/path/to/img.png)

Về trường hợp của tôi

![In a single picture](https://raw.githubusercontent.com/shadmazumder/Xcode/master/InOnePicture.png)

Ở đâu

• shadmazumder là của tôi username
• Xcode là projectname
• master là branch
• InOnePicture.pnglà image, trên trường hợp của tôi InOnePicture.pnglà trong thư mục gốc.

Có 2 cách đơn giản để bạn có thể làm điều này,

1) sử dụng thẻ HTML img,

2)! [] (Đường dẫn lưu hình ảnh của bạn / image-name.png)

đường dẫn bạn có thể sao chép từ URL trong trình duyệt trong khi bạn đã mở hình ảnh đó. có thể xảy ra sự cố về khoảng cách, vì vậy hãy đảm bảo nếu có bất kỳ khoảng trắng nào b / w hai từ của đường dẫn hoặc trong tên hình ảnh thêm->% 20. giống như trình duyệt làm.

Cả hai sẽ hoạt động, nếu bạn muốn hiểu thêm, bạn có thể kiểm tra github của tôi -> https://github.com/adityarawat29

Câu trả lời này cũng có thể được tìm thấy tại: https://github.com/YourUserAccount/YourProject/blob/master/DirectoryPath/ReadMe.md

Hiển thị hình ảnh từ repo bằng cách sử dụng:

tên miền trả trước: https://raw.githubusercontent.com/

gắn cờ: ?sanitize=true&raw=true

sử dụng <img />thẻ

• Tên miền :raw.githubusercontent.com/
• Tên người dùng :YourUserAccount/
• Repo :YourProject/
• Chi nhánh :YourBranch/
• Đường dẫn :DirectoryPath/
• Tên tệp :example.png

Hoạt động cho SVG, PNG và JPEG

 - `raw.githubusercontent.com/YourUserAccount/YourProject/YourBranch/DirectoryPath/svgdemo1.svg?sanitize=true&raw=true`

Mã ví dụ làm việc được hiển thị bên dưới sau khi sử dụng:

**raw.githubusercontent.com**:
<img src="https://raw.githubusercontent.com/YourUserAccount/YourProject/master/DirectoryPath/Example.png?raw=true" />

<img src="https://raw.githubusercontent.com/YourUserAccount/YourProject/master/DirectoryPath/svgdemo1.svg?sanitize=true&raw=true" />

raw.githubusercontent.com :

Cảm ơn: - https://stackoverflow.com/a/48723190/1815624 - https://github.com/potherca-blog/StackOverflow/edit/master/question.13808020.include-an-svg-hosted-on-github -in-markdown / readme.md

Tôi đã tìm thấy một giải pháp khác nhưng khá khác biệt và tôi sẽ giải thích nó

Về cơ bản, tôi đã sử dụng thẻ để hiển thị hình ảnh, nhưng tôi muốn đi đến một trang khác khi hình ảnh được nhấp và đây là cách tôi đã làm nó.

<a href="the-url-you-want-to-go-when-image-is-clicked.com" />
<img src="image-source-url-location.com" />

Nếu bạn đặt nó ngay cạnh nhau, cách nhau bởi một dòng mới, tôi đoán khi bạn nhấp vào hình ảnh, nó sẽ đi đến thẻ có href đến trang web khác mà bạn muốn chuyển hướng.

MUỘN NHẤT

Wikis có thể hiển thị hình ảnh PNG, JPEG hoặc GIF

Bây giờ bạn có thể sử dụng:

[[https://github.com/username/repository/blob/master/img/octocat.png|alt=octocat]]

-HOẶC LÀ-

Thực hiện theo các bước sau:

1. Trên GitHub, điều hướng đến trang chính của kho lưu trữ.

2. Dưới tên kho lưu trữ của bạn, nhấp Wiki.

3. Sử dụng thanh bên wiki, điều hướng đến trang bạn muốn thay đổi, rồi bấm Chỉnh sửa.

4. Trên thanh công cụ wiki, bấm vào Hình ảnh .

5. Trong hộp thoại "Chèn hình ảnh", nhập URL hình ảnh và văn bản thay thế (được sử dụng bởi các công cụ tìm kiếm và trình đọc màn hình).
6. Nhấn OK.

Tham khảo tài liệu .

Cân nhắc sử dụng tablenếu thêm nhiều ảnh chụp màn hình và muốn căn chỉnh chúng bằng dữ liệu dạng bảng để cải thiện khả năng truy cập như được hiển thị ở đây:

Nếu trình phân tích cú pháp đánh dấu của bạn hỗ trợ nó, bạn cũng có thể thêm role="presentation"thuộc tính WIA-ARIA vào phần tử TABLE và bỏ qua các ththẻ.

Từng bước xử lý, Đầu tiên hãy tạo một thư mục (đặt tên thư mục của bạn) và thêm hình ảnh / hình ảnh mà bạn muốn tải lên trong tệp Readme.md. (bạn cũng có thể thêm hình ảnh / hình ảnh vào bất kỳ thư mục hiện có nào trong dự án của bạn.) Bây giờ, Nhấp vào biểu tượng chỉnh sửa của tệp Readme.md, sau đó

![](relative url where images is located/refrence_image.png)  // refrence_image is the name of image in my case.

Sau khi thêm hình ảnh, bạn có thể xem bản xem trước các thay đổi trong tab "Xem trước thay đổi". Bạn sẽ tìm thấy hình ảnh của mình tại đây. ví dụ như thế này, trong trường hợp của tôi,

![](app/src/main/res/drawable/refrence_image.png)

thư mục ứng dụng -> thư mục src -> thư mục chính -> thư mục res -> thư mục drawable -> và bên trong thư mục drawable_image.png có thể vẽ được. Để thêm nhiều hình ảnh, bạn có thể làm như thế này,

![](app/src/main/res/drawable/refrence_image1.png)
![](app/src/main/res/drawable/refrence_image2.png)
![](app/src/main/res/drawable/refrence_image3.png)

Lưu ý 1 - Đảm bảo tên tệp hình ảnh của bạn không chứa bất kỳ khoảng trắng nào. Nếu nó chứa khoảng trắng thì bạn cần thêm% 20 cho mỗi khoảng trắng giữa tên tệp. Tốt hơn là xóa các khoảng trắng.

Lưu ý 2 - bạn thậm chí có thể thay đổi kích thước hình ảnh bằng cách sử dụng thẻ HTML hoặc có nhiều cách khác. bạn có thể google nó để biết thêm. nếu bạn cần nó.

Sau này, hãy viết thông báo thay đổi cam kết của bạn và sau đó cam kết Thay đổi của bạn.

Có rất nhiều hack khác để làm điều đó như thế nào, tạo ra một vấn đề và vv và cho đến nay đây là phương pháp tốt nhất mà tôi đã đi qua.

Chúng ta có thể làm điều này một cách đơn giản,

• tạo một vấn đề mới trên GitHub
• kéo và thả hình ảnh trên cơ thể divcủa vấn đề

sau vài giây, một liên kết sẽ được tạo ra. Bây giờ, sao chép liên kết hoặc URL hình ảnh và sử dụng nó bất kỳ nền tảng được hỗ trợ.

Thêm hình ảnh trong kho lưu trữ của bạn từ tùy chọn tệp tải lên, sau đó trong tệp README

![Alt text]("enter repository image URL here") 

Vẫn còn một lựa chọn khác mà tôi chưa thấy đề cập. Bạn chỉ có thể tạo một kho lưu trữ khác dưới người dùng hoặc tổ chức của mình được gọi là "tài sản". Đẩy hình ảnh của bạn đến repo này và tham chiếu chúng từ các repos khác của bạn:

![alt text](https://raw.githubusercontent.com/my-org/assets/master/folder/logo.png)

Tôi đã thực hiện điều này trong một trong những repos của tôi và nó rất phù hợp với tôi. Tôi có thể phiên bản hình ảnh README của mình cho tất cả các dự án của mình một cách độc lập với mã của tôi, nhưng vẫn giữ tất cả chúng ở một nơi . Không có vấn đề hoặc chi nhánh hoặc các tạo tác dễ bị thất lạc khác yêu cầu.