Onlangs ben ik lid geworden van Github . Ik heb daar enkele projecten georganiseerd.

Ik moet wat afbeeldingen opnemen in mijn README-bestand. Ik weet niet hoe ik dat moet doen.

Ik heb hierover gezocht, maar alles wat ik kreeg was enkele links die me vertelden om ‘beelden op het web te hosten en het beeldpad in README.MD-bestand op te geven “.

Is er een manier om dit te doen zonder de afbeeldingen te hosten op webhosting-services van derden?

1, Autoriteit 100%

Probeer deze marketing:

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

Ik denk dat u rechtstreeks naar de onbewerkte versie van een afbeelding kunt koppelen als deze in uw repository wordt opgeslagen. d.w.z.

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

2, Autoriteit 25%

U kunt ook relatieve paden gebruiken zoals

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

Probeer ook het volgende met de gewenste .fileExtention:

![plot](./directory_1/directory_2/.../directory_n/plot.png)

3, Autoriteit 13%

U kunt een nieuw probleem maken
uploaden (drag & amp; druppel) afbeeldingen
Kopieer de afbeeldingen URL en plak deze in uw LEADME.MD-bestand.

Hier is een gedetailleerde YouTube-video uitgelegd dit in detail:

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

4, Autoriteit 7%

Het is veel eenvoudiger dan dat.

Upload uw afbeelding gewoon naar de repository-root en koppeling naar de bestandsnaam zonder een pad, zoals SO:

![Screenshot](screenshot.png)

5, Autoriteit 3%

Veel van de geposte oplossingen zijn onvolledig of niet op mijn smaak.

Een externe CDN zoals Imgur voegt een ander hulpmiddel toe aan de ketting. MEH.
Het creëren van een dummy-probleem in het nummer Tracker is een hack. Het creëert rommel en verwart gebruikers. Het is een pijn om deze oplossing naar een vork te migreren, of uit Github.
Het filiaal van de GH-PAGINA’s gebruiken, maakt de URL’s broos. Een andere persoon die aan het onderhoud van de GH-PAGE werkt, is mogelijk niet iets extern, afhankelijk van het pad naar deze afbeeldingen. De GH-PAGINES-tak heeft een bepaald gedrag op GitHub die niet nodig is voor het hosten van CDN-afbeeldingen.
Tracking-activa in versiebeheer is een goede zaak. Als project groeit en verandert het een duurzamere manier om veranderingen door meerdere gebruikers te beheren en bij te houden.
Als een afbeelding van toepassing is op een specifieke herziening van de software, kan het de voorkeur hebben om een onveranderlijk beeld te koppelen. Op die manier, als het beeld later wordt bijgewerkt om wijzigingen in de software weer te geven, is iedereen die leest die de README van Revision de juiste afbeelding vindt.

My Preferred Solution, geïnspireerd door deze gist , is om een activa tak te gebruiken Met Permalinks naar specifieke revisies .

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.

Maak een “permalink” naar deze revisie van de afbeelding en verpak deze in Markdown.

Het handmatig opzoeken van de commit SHA is echter onhandig, dus druk als snelkoppeling op Y naar een permalink naar een bestand in een specifieke commit als dit help.github-pagina zegt.

Gebruik de blob-URL om altijd de nieuwste afbeelding op de activatak weer te geven:

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

(Van dezelfde GitHub-helppagina Bestandsweergaven tonen de nieuwste versie op een branch)

Antwoord 6

Bevestigje afbeelding (image.png) in een map (myFolder) en voeg de volgende regel toe aan je README. md:

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

Antwoord 7

Ik moet enkele afbeeldingen opnemen in mijn README-bestand. ik weet niet hoe ik moet
doe dat.

Ik heb een kleine wizard gemaakt waarmee je eenvoudige afbeeldingsgalerijen kunt maken en aanpassen voor de leesmij van je GitHub-repository: zie ReadmeGalleryCreatorForGitHub .

De wizard maakt gebruik van het feit dat GitHub img-tags toestaat in de README.md. De wizard maakt ook gebruik van de populaire truc om afbeeldingen naar GitHub te uploaden door ze te slepen en neer te zetten in het probleemgebied (zoals al vermeld in een van de antwoorden in deze thread).

Antwoord 8

Een probleem maken met betrekking tot het toevoegen van afbeeldingen
Voeg de afbeelding toe door middel van slepen en neerzetten of met de bestandskiezer
Kopieer vervolgens de afbeeldingsbron
Voeg nu ![alt tag](http://url/to/img.png)toe aan uw README.md-bestand

Klaar!

Als alternatief kunt u een afbeeldingshostingsite zoals imgurgebruiken en de url ophalen en deze toevoegen aan uw README.md-bestand of u kunt ook een statische bestandshosting gebruiken.

Voorbeeldprobleem

Antwoord 9

Basissyntaxis

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

Hier:

mijn-afbeelding-alt-tag : tekst die wordt weergegeven als de afbeelding niet wordt weergegeven.
url-naar-afbeelding : wat uw afbeeldingsbron ook is. URI van de afbeelding

Voorbeeld:

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

Dit ziet er als volgt uit:

Antwoord 10

Voeg gewoon een <img>tag toe aan uw README.md met relatieve src naar uw repository. Als je relatieve src niet gebruikt, zorg er dan voor dat de server CORS ondersteunt.

Het werkt omdat GitHub inline-htmlondersteunt

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

Bekijk hier

Antwoord 11

Gebruik tabellen om op te vallen, het zal er een aparte charme aan geven

Tabelsyntaxis is:

Scheid elke kolomcel met een symbool |

en tabelkop (eerste rij) bij 2e rij bij ---

| col 1 | col 2 |

|———— | ————-|

| afbeelding 1 | afbeelding 2 |

uitvoer

Zet nu gewoon <img src="url/relativePath">bij afbeelding 1 en afbeelding 2 als u twee afbeeldingen gebruikt

Opmerking: als u meerdere afbeeldingen gebruikt, voegt u alleen meer kolommen toe, dan kunt u de attributen width en height gebruiken om het er leesbaar uit te laten zien.

Voorbeeld

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

Spatiëring doet er niet toe

Uitvoerafbeelding

geholpen door: adam-p

Antwoord 12

Stap voor stap proces,
Maak eerst een map (naam uw map) en voeg de afbeelding / afbeeldingen toe die u wilt uploaden in het README.MD-bestand. (U kunt ook de afbeelding / afbeeldingen toevoegen in een bestaande map van uw project.)
Klik nu op het pictogram Bewerken van Readme.md-bestand en vervolgens

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

Na het toevoegen van afbeelding ziet u een preview van wijzigingen in de, “Voorbeeldwijzigingen” -tab. U vindt hier uw afbeelding.
zoals dit bijvoorbeeld,
In mijn zaak,

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

App-map – & GT; SRC-map – & GT; Main Folder – & GT; Res-map – & GT; Trekbare map – & GT; en binnenste opleiding map freander_image.png-bestand bevindt zich.
Voor het toevoegen van meerdere afbeeldingen kunt u het zo doen,

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

OPMERKING 1 – Zorg ervoor dat uw beeldbestandsnaam geen spaties bevat. Als het spaties bevat, moet u% 20 voor elke ruimte tussen de bestandsnaam toevoegen. Het is beter om de ruimtes te verwijderen.

OPMERKING 2 – U kunt zelfs de grootte van de afbeelding wijzigen met HTML-tags, of er zijn andere manieren. Je kunt het Google voor meer.
Als je het nodig hebt.

Noteer hierna uw commit wijzigingen en verbind vervolgens uw wijzigingen.

Er zijn veel andere hacks van het doen, creëren een probleem en etc en etc. verreweg dit is de beste methode die ik heb tegengekomen.

13

In Nieuwe Github UI werkt dit voor mij –

Voorbeeld – Begin uw afbeelding.png in een map (MyFolder) en voeg de volgende regel toe in uw LEADME.MD:

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

14

U kunt gewoon doen:

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

Dan kun je er gewoon naar verwijzen in het README-bestand als volgt:

![diagram](diagram.png)

Antwoord 15

Ik host meestal de afbeelding op de site, dit kan een link naar elke gehoste afbeelding bevatten. Gooi dit maar in de readme. Werkt voor .rstbestanden, niet zeker van .md

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

Antwoord 16

In mijn geval gebruik ik imguren gebruik ik de directe link op deze manier.

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

Antwoord 17

Je kunt vanaf README.md (of extern) naar afbeeldingen in je project linken met behulp van de alternatieve github CDN-link.

De URL ziet er als volgt uit:

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

Ik heb een SVG-afbeelding in mijn project en als ik ernaar verwijs in mijn Python-projectdocumentatie, wordt deze niet weergegeven.

Projectlink

Hier is de projectlink naar het bestand (wordt niet weergegeven als afbeelding):

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

Voorbeeld van ingesloten afbeelding:

Onbewerkte link

Hier is de RAW-link naar het bestand (wordt nog steeds niet weergegeven als afbeelding):

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

Voorbeeld ingesloten afbeelding:

CDN-link

Met behulp van de CDN-link kan ik naar het bestand linken met (wordt weergegeven als afbeelding):

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

Voorbeeld ingesloten afbeelding:

Zo kan ik afbeeldingen van mijn project gebruiken in zowel mijn README.md-bestand als in mijn PyPi-project reStructredText-documentatie (hier)

Antwoord 18

DIT WERKT ALLEEN!!

Let op uw bestandsnaam in hoofdletters in de tag en plaats het PNG-bestand in de root, en link naar de bestandsnaam zonder enig pad:

![Screenshot](screenshot.png)

Antwoord 19

U kunt gebruiken

![A test image](image.png)

Waar ![A test image]uw alt-tekst is en (image.png)de link naar uw afbeelding is.

U kunt de afbeelding op een cloudservice of andere online hostingplatforms voor afbeeldingen plaatsen
Of u kunt de afbeeldingslink van de repository opgeven als deze zich in de repo bevindt

U kunt ook een specifieke map in uw repository maken voor uw leesmij-afbeeldingen

Antwoord 20

Ik heb dit probleem opgelost. Je hoeft alleen maar naar het leesmij-bestand van iemand anders te verwijzen.

Eerst moet u een afbeeldingsbestand uploaden naar de github-codebibliotheek! Dan directe verwijzing naar het adres van het afbeeldingsbestand.

Antwoord 21

Er zijn 2 eenvoudige manieren om dit te doen,

1) gebruik HTML img-tag ,

2) ![](het pad waar uw afbeelding wordt opgeslagen/afbeeldingsnaam.png)

het pad dat u van de URL in de browser kunt kopiëren terwijl u die afbeelding hebt geopend.
er kan een probleem zijn met de spatiëring, dus zorg ervoor dat als er een spatie is b/w twee woorden pad of in de afbeeldingsnaam add-> %20. net als browsers.

Beide zullen werken , als je meer wilt weten kun je mijn github -> https://github.com/adityarawat29

Antwoord 22

Dit antwoord is ook te vinden op:
https://github.com/YourUserAccount/YourProject/blob/master/ DirectoryPath/ReadMe.md

Beelden uit repo weergeven met:

prepend domein: https://raw.githubusercontent.com/

vlag toevoegen: `?sanitize=true&raw=true`

gebruik `<img />`-tag

Eample url werkt voor svg, png en jpg met behulp van:

Domein: raw.githubusercontent.com/
Gebruikersnaam: YourUserAccount/
Repo: YourProject/
Branch: YourBranch/
Pad: DirectoryPath/
Bestandsnaam: example.png

Werkt voor SVG, PNG en JPEG

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

Werkvoorbeeldcode hieronder weergegeven na gebruik:

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

Bedankt:
– 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

Antwoord 23

In mijn geval wilde ik een afdrukscherm tonen op Githubmaar ook op NPM. Hoewel het gebruik van het relatieve pad binnen Githubwerkte, werkte het niet buiten. In principe, zelfs als ik mijn project naar NPMook duwde (die eenvoudig hetzelfde gebruikt readme.md, werd de afbeelding nooit getoond.

Ik heb een paar manieren geprobeerd, uiteindelijk is dit wat voor mij werkte:

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

Ik zie mijn afbeelding nu correct op NPMof ergens anders dat ik mijn pakket kon publiceren.

Antwoord 24

Ik breid alleen een voorbeeld uit of voeg een voorbeeld toe aan het reeds geaccepteerde antwoord.

Zodra je de afbeelding op je Github-repo hebt geplaatst.

Dan:

Open de bijbehorende Github-repo in je browser.
Navigeer naar het doelafbeeldingsbestand Open vervolgens de afbeelding in een nieuw tabblad.
Kopieer de url
en plaats uiteindelijk de URL in het volgende patroon ![alt text](https://raw.githubusercontent.com/username/projectname/branch/path/to/img.png)

Aan mijn geval is het

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

waar

shadmazumderis mijn username
Xcodeis de projectname
masteris de branch
InOnePicture.pngis de image, in mijn geval InOnePicture.pngbevindt zich in de hoofdmap.

25

U kunt de afbeeldingen nu slepen en neerzetten tijdens het bewerken van het README-bestand.

GitHub maakt een link voor u die in het formaat van:

https://user-images.githubusercontent.com/******/********.file_format

Als alternatief, onderaan het bestand, zegt het “Bevestig bestanden door Slepen & AMP te slepen; vallen, selecteren of plakken”. Als u op die klikt, geeft u een optie om rechtstreeks een bestand te uploaden of u kunt het gewoon plakken!

26

Ik heb een andere oplossing gevonden, maar heel anders en ik zal het uitleggen

In principe gebruikte ik de tag om de afbeelding te tonen, maar ik wilde naar een andere pagina gaan wanneer de afbeelding is geklikt en hier is hoe ik het deed.

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

Als u het naast elkaar naast elkaar plaatst, gescheiden door een nieuwe regel, denk ik wanneer u op de afbeelding klikt, het gaat naar de tag die de HREF heeft op de andere site die u wilt omleiden.

27

Laatste

Wiki’s kunnen PNG, JPEG of GIF-afbeeldingen

weergeven

Nu kunt u gebruiken:

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

-Or –

Volg deze stappen:

op GitHub Navigeer naar de hoofdpagina van de repository.
Klik onder uw repository-naam op Wiki.
Navigeer de pagina met de WIKI-zijbalk naar de pagina die u wilt wijzigen en klik vervolgens op Bewerken.
Klik op de WIKI-werkbalk op Afbeelding .
Typ in het dialoogvenster “Afbeelding invoegen” de afbeelding-URL en de ALT-tekst (die wordt gebruikt door zoekmachines en schermlezers).
Klik op OK.

Verwijs docs .

28

Overweeg een tablete gebruiken als het toevoegen van meerdere screenshots en wilt uitlijnen met behulp van tabelgegevens voor verbeterde bereikbaarheid zoals hier wordt weergegeven:

Als uw Markdown Parser het ondersteunt, kunt u ook de role="presentation"WIA-ARIA ATRIBUTE AAN HET TABEL-element en de thTAGS.

Foto’s toevoegen aan ReadMe.md op Github?