Câu hỏi Thêm hình ảnh vào README.md trên GitHub


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

Tôi cần bao gồm một số hình ảnh trong 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 để thực hiện việc 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?


1082
2018-01-24 05:44


gốc


jefclaes.be/2012/04/add-images-to-github-readme.html - Explosion Pills
Bản sao của stackoverflow.com/questions/10189356/… đã được đăng vào năm 2012. - leetNightshade
Không phải ngoài chủ đề, GitHub là công cụ của một lập trình viên. - Lance Roberts
Có thể trùng lặp Làm thế nào để thêm ảnh chụp màn hình vào README trong kho github? - Marcus
Tôi thấy rằng tôi phải sử dụng địa chỉ được liệt kê khi đi đến hình ảnh đó trong Github khác với những gì mọi người đang nói bên dưới. ![title](https://github.com/username/reponame/blob/master/subfolders.../filename.jpg)  Chú ý cụm từ "blob" trong tên tệp. Câu trả lời ở đây không hiệu quả với tôi trong năm 2017. - Ryan


Các câu trả lời:


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 một hình ảnh nếu nó được lưu trữ trong kho lưu trữ của bạn. I E.

![alt text](https://raw.githubusercontent.com/username/projectname/branch/path/to/img.png)

Chỉnh sửa: chỉ nhận thấy nhận xét liên kết đến bài viết gợi ý sử dụng gh-pages. Ngoài ra, các liên kết tương đối có thể là một ý tưởng tốt hơn các URL tuyệt đối mà tôi đã đăng ở trên.


1142
2018-01-24 05:46



help.github.com/articles/how-do-i-add-images-to-my-wiki - sunkehappy
Bạn cũng nên cân nhắc sử dụng liên kết tương đối - mgalgs
Liên kết tương đối không phải là một sử dụng tuyệt vời ở đây, hãy tưởng tượng readme của bạn cũng được hiển thị trên npm mà không lưu trữ hình ảnh theo cách này - nó cần phải liên kết đến GitHub. Hình ảnh srcs nên được trên github.com miền, không phải raw.github.com tên miền phụ và không phải là raw.githubusercontent.com miền. - Lee Crossley
Tôi thực sự đã kết thúc với các đường dẫn tương đối (mà đối với tôi chỉ là tên của tập tin hình ảnh bởi vì tôi có tất cả mọi thứ trong thư mục gốc). Tôi đã duy trì 2 bản sao của README.md, một bản để cài đặt cục bộ trong / usr / share / projectname / docs và một cho github. Bây giờ, tôi chỉ có thể sử dụng cùng một README.md cho cả hai kể từ khi tên tập tin hình ảnh làm việc tốt trong cả hai trường hợp. Nếu tôi muốn đăng một bản sao các phần README của mình ở một nơi khác, tôi sẽ phải lưu trữ hình ảnh ở một nơi khác hoặc đặt trong url raw.github.com. - Colin Keenan
GitHub tự giới thiệu đường dẫn tương đối: help.github.com/articles/relative-links-in-readmes Một nhược điểm chính của đường dẫn tuyệt đối là, nếu hình ảnh được di chuyển trong chủ, các nhánh khác vẫn trỏ đến URL cũ sẽ bị hỏng. - Jack O'Connor


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")

186
2017-10-08 03:18



Vâng. Đây là cách dễ nhất, trừ khi bạn lo lắng về hiệu suất. Tôi sẽ lưu ý rằng điều này liên quan đến danh mục không phải repo, vì vậy nếu bạn có 'myimage.png' trong cùng một thư mục với 'about_pics.md' thì đánh dấu là:![What is this](myimage.png) - Rich
Đây là một giải pháp tuyệt vời vì 1) nó hoạt động 2) hình ảnh cũng được hiển thị trong trình xem cục bộ, không cần truy cập internet - Régis B.
@ Bạn có thể mở rộng nhận xét của mình về hiệu suất. Những vấn đề hiệu suất nào có liên quan đến đường dẫn tương đối? - Lea Hayes
Oh, tôi chỉ nghĩ rằng vì điều này lấy hình ảnh từ repo, nó thực chất sẽ làm nhiều việc hơn là có hình ảnh trên CDN hay gì đó. - Rich
Con đường này liên quan đến cái gì? - Dims


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

đây là video chi tiết về youTube giải thích chi tiết này:

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


117
2017-10-28 06:03



Đây cũng là một gợi ý tốt, nhưng tiếc là không phải là câu trả lời cho tệp README. Công cụ sao chép không có tác dụng (ít nhất là không phải tại thời điểm này). - Per Lundberg
Đây sẽ là câu trả lời được chấp nhận ... - Ryan Vice
Bạn có thể ít nhất thêm một số điểm bullet ở đây. Liên kết không thực sự là câu trả lời. - JGallardo
Theo như tôi hiểu bạn không thực sự cần tiết kiệm vấn đề. Bằng cách này bạn không thực sự cần những vé giả trong Bộ theo dõi vấn đề. Câu hỏi là nếu đây là một phương pháp "an toàn", có nghĩa là nếu GitHub sẽ phát hiện (sau một thời gian) hình ảnh đó là mồ côi và do đó xóa nó khỏi CDN GitHub ?? - peterh
Liên kết đã chết. - Spen


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

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

![Screenshot](screenshot.png)

58
2017-07-08 20:07



Không, tôi không nghĩ rằng việc thêm ảnh chụp màn hình vào git repo là một thực hành tốt. Đặc biệt không phải ở gốc. Câu trả lời của Ahmad Ajmi tốt hơn nhiều - Arnaud P
Không phải ở gốc nhưng bạn có thể dễ dàng điều chỉnh điều này để docs/images hoặc những gì bao giờ, ảnh chụp màn hình png nhỏ là ok IMHO - Christophe Roussy
Đây sẽ là giải pháp được chấp nhận, đặc biệt. với đề xuất của Christophe để đưa những hình ảnh theo doc / tree / - Mike Ellis
chỉ sử dụng giải pháp đó, nó hoàn toàn hoạt động, đơn giản và dễ dàng. - Ruff9
hoàn hảo..!! nếu png nằm trong một thư mục khác. Chỉ cần thêm đường dẫn "folderName / screenshot.png" - Soumen


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

<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>

58
2018-01-30 04:45



Khi bạn sử dụng thẻ HTML bên trong tệp đánh dấu của bạn. Nó sẽ bị bỏ qua bởi Pandoc, một công cụ chuyển đổi tài liệu toàn cầu. - Xinyang Li
Tôi đoán nó không đủ phổ biến rồi lol - rococo
Điều này là tốt nhất để nó có thể được đặt ở giữa hoặc đặt ở một bên (cho hình ảnh nhỏ hơn, ít nhất.) - Alexis Wilke


Nhiều giải pháp được đăng không đầy đủ hoặc không phù hợp với khẩu vị 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 bộ theo dõi vấn đề là một hack. Nó tạo ra lộn xộn và gây nhầm lẫn cho người dùng. Đó là một nỗi đau để di chuyển giải pháp này đến một ngã ba, hoặc tắt GitHub.
  • Sử dụng chi nhánh gh-trang làm cho các URL trở nên giòn. Một người khác làm việc trên 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-trang có một hành vi cụ thể trên GitHub mà không cần thiết để lưu trữ các 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à một 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ể thích hợp hơn để liên kết một hình ảnh bất biến. Bằng cách đó, nếu hình ảnh sau này được cập nhật để phản ánh những thay đổi đối với phần mềm, bất kỳ ai đọc đọc readme của 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ừ gist này, là sử dụng chi 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 needed below.

Xây dựng một "permalink" để sửa đổi này của hình ảnh, và quấn nó trong Markdown:

![Cat](https://raw.githubusercontent.com/{user}/{repo}/{sha}/cat.png)

ví dụ.

![Cat](https://raw.githubusercontent.com/paulmelnikow/zsh-startup-timer/3923c60fc66d4223ccf063d169ccf2ff167b1270/cat.png)

Để 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 assets thay cho sha:

![Cat](https://raw.githubusercontent.com/{user}/{repo}/assets/cat.png)


20
2018-03-08 17:13





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

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


14
2018-06-14 10:01





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ẽ giống như sau:

stack overflow image by alamin


11
2018-01-21 16:09





  • Tạo sự cố 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 cách 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ư imgur và 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ố tệp lưu trữ tĩnh.

Vấn đề mẫu


11
2017-10-12 19:02



Đã thích thêm hình ảnh vào mẹo giải quyết để lưu trữ chúng - Jordi Nebot
Đây là cách dễ nhất để thêm chúng theo ý kiến ​​của tôi. Đơn giản chỉ cần kéo chúng vào hộp, sao chép địa chỉ và dán nó vào readme của bạn với chú thích dưới đây. Boom, bạn đã hoàn thành. - Joe Hill


Tôi cần bao gồm một số hình ảnh trong tệp README của mình. Tôi không biết làm thế nào để   làm việc đó đi.

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 hình ảnh đơn giản cho readme của kho GitHub của bạn: ReadmeGalleryCreatorForGitHub.

Trình hướng dẫn tận dụng lợi thế của việc 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 tải hình ảnh phổ biến lên GitHub bằng cách kéo và thả chúng vào khu vực phát hành (như đã đề cập trong một trong các câu trả lời trong chuỗi này).


7
2017-09-25 20:48