Ajouter des images à README.md sur GitHub
Récemment, j'ai rejoint GitHub . J'ai hébergé des projets là-bas.
J'ai besoin d'inclure des images dans mon fichier README. Je ne sais pas comment faire ça.
J'ai cherché à ce sujet, mais tout ce que j'ai eu, c'est des liens qui me disent "Héberger des images sur le Web et spécifier le chemin de l'image dans le fichier README.md".
Est-il possible de le faire sans héberger les images sur des services d'hébergement Web tiers?
Essayez cette démarque:
Je pense que vous pouvez créer un lien direct vers la version brute d’une image si elle est stockée dans votre référentiel. c'est à dire.
Edit: vient de remarquer un commentaire renvoyant à un article suggérant l’utilisation de gh-pages. En outre, les liens relatifs peuvent être une meilleure idée que les URL absolues que j'ai postées ci-dessus.
Vous pouvez également utiliser des chemins relatifs comme
- Vous pouvez créer un nouveau numéro
- télécharger (glisser-déposer) des images dessus
- Copiez l'URL des images et collez-le dans votre fichier README.md.
voici une vidéo détaillée de youTube qui explique cela en détail:
C'est beaucoup plus simple que ça.
Il suffit de télécharger votre image à la racine du référentiel et de créer un lien vers le nom du fichier sans chemin, comme ceci:
Vous pouvez également ajouter des images avec de simples balises 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>
Commit votre image ( image.png ) dans un dossier ( myFolder ) et ajoutez la ligne suivante dans votre README.md :
- _ {Créer un problème concernant l'ajout d'images} _
- _ {Ajoutez l'image par glisser-déposer ou par sélecteur de fichier} _
_ {Copiez ensuite la source de l'image} _
Ajoutez maintenant
à votre fichier README.md
Terminé!
Sinon, vous pouvez utiliser un site d'hébergement d'images tel que imgur et obtenir son adresse URL et l'ajouter à votre fichier README.md. Vous pouvez également utiliser l'hébergement de fichiers statiques également.
Syntaxe de base
Ici:
- my-image-alt-tag: texte qui sera affiché si l'image n'est pas affichée.
- url-to-image: quelle que soit votre ressource image. URI de l'image
Exemple:
Cela ressemblera à ceci:
Ajoutez simplement une balise <img> à votre README.md avec le code relatif à votre référentiel. Si vous n'utilisez pas de source relative, assurez-vous que le serveur prend en charge CORS.
Cela fonctionne parce que le support GitHub inline-html
<img src="/docs/logo.png" alt="My cool logo"/>
# My cool project and above is the logo of it
Observez ici
J'ai besoin d'inclure des images dans mon fichier README. Je ne sais pas comment. fais ça.
J'ai créé un petit assistant qui vous permet de créer et de personnaliser de simples galeries d'images pour le readme de votre référentiel GitHub: Voir ReadmeGalleryCreatorForGitHub .
L’assistant tire parti du fait que GitHub permet aux balises img de se produire dans le README.md. En outre, l'assistant utilise le truc populaire du téléchargement d'images sur GitHub en les faisant glisser dans la zone de publication (comme déjà mentionné dans l'une des réponses de ce fil).
Dans mon cas, j'utilise imgur et utilise le lien direct de cette façon.
Vous pouvez créer un lien vers les images de votre projet à partir de README.md (ou en externe) à l’aide du lien alternatif github CDN.
L'URL ressemblera à ceci:
https://cdn.rawgit.com/<USER>/<REPO>/<BRANCH>/<PATH>/<TO>/<FILE>
J'ai une image SVG dans mon projet et lorsque je la référence dans la documentation de mon projet Python, elle ne s'affiche pas.
Lien du projet
Voici le lien du projet au fichier (ne s'affiche pas sous forme d'image):
https://github.com/jongracecox/anybadge/blob/master/examples/awesomeness.svg
Exemple d'image intégrée: 
Lien brut
Voici le lien RAW vers le fichier (ne s'affiche toujours pas sous forme d'image):
https://raw.githubusercontent.com/jongracecox/anybadge/master/examples/awesomeness.svg
Exemple d'image intégrée: 
Lien CDN
En utilisant le lien CDN, je peux créer un lien vers le fichier en utilisant (rendu sous forme d'image):
https://cdn.rawgit.com/jongracecox/anybadge/master/examples/awesomeness.svg
Exemple d'image intégrée: 
C’est ainsi que je peux utiliser les images de mon projet à la fois dans mon fichier README.md et dans mon projet PyPi reStructredText doucmentation ( ici )
J'ai résolu ce problème. Il vous suffit de vous référer au fichier readme de quelqu'un d'autre.
Au début, vous devriez télécharger un fichier image dans la bibliothèque de codes github! Ensuite, référence directe à l'adresse du fichier image.
J'ai l'habitude d'héberger l'image sur le site, cela peut être lié à n'importe quelle image hébergée. Il suffit de lancer ceci dans le readme. Fonctionne pour les fichiers .rst, pas sûr de .md
.. image:: https://url/path/to/image
:height: 100px
:width: 200 px
:scale: 50 %
Au cas où vous auriez besoin de télécharger des images pour la documentation, une approche intéressante consiste à utiliser git-lfs . En supposant que vous ayez installé le git-lfs, suivez ces étapes:
Intialize git lfs pour chaque type d’image:
git lfs *.png git lfs *.svg git lfs *.gif git lfs *.jpg git lfs *.jpegCréez un dossier qui sera utilisé comme emplacement d'image, par exemple.
doc. Sur les systèmes GNU/Linux et Unix, ceci peut être effectué via:cd project_folder mkdir doc git add docCopier coller toutes les images dans le dossier doc. Ensuite, ajoutez-les via la commande
git add.S'engager et pousser.
Les images sont accessibles au public dans l'URL suivante:
https://media.githubusercontent.com/media/ ^ github_username ^/^ repo ^/^ branche ^/^ image_location dans le repo ^
Où: * ^github_username^ est le nom d'utilisateur dans github (vous le trouverez dans la page de profil) * ^repo_name^ est le nom du référentiel * ^branch^ est la branche du référentiel où l'image est téléchargée * ^image_location in the repo^ est l'emplacement, y compris le dossier dans lequel l'image est stockée.
Vous pouvez également télécharger l'image en premier lieu, puis visiter l'emplacement dans la page github de vos projets et naviguer jusqu'à trouver l'image, puis appuyer sur le bouton download, puis copier-coller l'URL à partir de la barre d'adresse du navigateur.
Regardez ceci de mon projet comme référence.
Ensuite, vous pouvez utiliser l'URL pour les inclure en utilisant la syntaxe de démarquage mentionnée ci-dessus:
Par exemple, supposons que nous utilisions cette photo Ensuite, vous pouvez utiliser la syntaxe de démarquage:
Utilisez des tables pour vous démarquer, cela lui donnera un charme séparé
La syntaxe de la table est:
Séparez chaque colonne par le symbole |
et en-tête de table (première ligne) par la deuxième ligne par ---
| col 1 | col 2 |
| ------------ | ------------- |
| image 1 | image 2 |
sortie
Il suffit maintenant de mettre <img src="url/relativePath"> à l'image 1 et à l'image 2 si vous utilisez deux images
Remarque: si vous utilisez plusieurs images, incluez simplement plus de colonnes, utilisez éventuellement les attributs width et height pour la rendre lisible}
Exemple
| 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"> |
_ {La dose d'espacement n'a pas d'importance}
Image en sortie
aidé par: adam-p
Cette réponse se trouve également à l'adresse suivante: https://github.com/YourUserAccount/YourProject/blob/master/DirectoryPath/ReadMe.md
Afficher les images du repo en utilisant:
prepend domain: https://raw.githubusercontent.com/ ou https://cdn.rawgit.com/
annexe indicateur: ?sanitize=true&raw=true
utiliser la balise <img />
- Domaine:
raw.githubusercontent.com/ - Nom d'utilisateur:
YourUserAccount/ - Repo:
YourProject/ - Branch:
YourBranch/ - Chemin:
DirectoryPath/ - Nom de fichier:
example.png
Fonctionne pour SVG, PNG et JPEG
- `raw.githubusercontent.com/YourUserAccount/YourProject/YourBranch/DirectoryPath/svgdemo1.svg?sanitize=true&raw=true`
Exemple de code de travail affiché ci-dessous après utilisation:
**raw.githubusercontent.com**:
<img src="https://raw.githubusercontent.com/YourUserAccount/YourProject/master/DirectoryPath/Example.png?sanitize=true&raw=true" />
<img src="https://raw.githubusercontent.com/YourUserAccount/YourProject/master/DirectoryPath/svgdemo1.svg?sanitize=true&raw=true" />
**https://cdn.rawgit.com**:
<img src="https://cdn.rawgit.com/YourUserAccount/YourProject/master/DirectoryPath/Example.png" />
<img src="https://cdn.rawgit.com/YourUserAccount/YourProject/master/DirectoryPath/svgdemo1.svg" />
raw.githubusercontent.com:
Merci: - 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
JUSTE ÇA MARCHE !!
prenez soin de votre nom de fichier en majuscule dans la balise et mettez le fichier PNG inroot, et créez un lien vers le nom du fichier sans chemin
Nous pouvons le faire simplement,
- créer un nouveau numéro sur GitHub
- glisser et déposer des images sur le corps
divdu problème
au bout de quelques secondes, un lien sera généré. A présent, copiez l'URL du lien ou de l'image et utilisez-la sur toute plate-forme prise en charge.
J'ai trouvé une autre solution mais tout à fait différente et je vais l'expliquer
En gros, j'ai utilisé le tag pour afficher l'image, mais je voulais aller sur une autre page lorsque l'image a été cliquée et voici comment je l'ai fait.
<a href="the-url-you-want-to-go-when-image-is-clicked.com" />
<img src="image-source-url-location.com" />
Si vous le placez les uns à côté des autres, séparés par une nouvelle ligne, j'imagine que lorsque vous cliquez sur l'image, elle passe à la balise qui contient le href vers l'autre site que vous souhaitez rediriger.
DERNIER
Les wikis peuvent afficher des images PNG, JPEG ou GIF
Maintenant vous pouvez utiliser:
[[https://github.com/username/repository/blob/master/img/octocat.png|alt=octocat]]
-OU-
Suivez ces étapes:
Sur GitHub, accédez à la page principale du référentiel.
Sous le nom de votre référentiel, cliquez sur Wiki.
À l'aide de la barre latérale du wiki, accédez à la page que vous souhaitez modifier, puis cliquez sur Modifier.
Sur la barre d’outils wiki, cliquez sur Image.
- Dans la boîte de dialogue "Insérer une image", tapez l'URL de l'image et le texte de remplacement (utilisé par les moteurs de recherche et les lecteurs d'écran).
- Cliquez sur OK.
Référez-vous à Docs .
Il y a 2 façons simples de le faire,
1) utilisez la balise HTML img,
2)! [] (Le chemin où votre image est sauvegardée/image-name.png)
le chemin que vous pouvez copier à partir de l'URL dans le navigateur pendant que vous avez ouvert cette image. il peut y avoir un problème d'espacement, alors assurez-vous qu'il y ait un espace entre deux mots de chemin ou dans le nom de l'image add->% 20. tout comme le navigateur le font.
Les deux fonctionneront, si vous voulez en savoir plus, vous pouvez vérifier mon github -> https://github.com/adityarawat29
Pensez à utiliser une table si vous ajoutez plusieurs captures d'écran et souhaitez les aligner à l'aide de données tabulaires pour une meilleure accessibilité, comme illustré ici:
Si votre analyseur de markdown le prend en charge, vous pouvez également ajouter l'attribut role="presentation" WIA-ARIA à l'élément TABLE et omettre les balises th.