Comment afficher une image locale dans Markdown


142

J'essaie ce qui suit dans Markdown, mais cela ne semble pas fonctionner, quelqu'un sait comment afficher une image locale dans Markdown? Je ne veux pas configurer de serveur Web pour cela. Merci

![image](files/Users/jzhang/Desktop/Isolated.png)

Réponses:


108

Je soupçonne que le chemin n'est pas correct. Comme mentionné par user7412219, ubuntu et windows traitent le chemin différemment. Essayez de mettre l'image dans le même dossier que votre notebook et utilisez:

![alt text](Isolated.png "Title")

Sous Windows, le bureau doit être à: C: \ Users \ jzhang \ Desktop


6
Que fait "Titre"?
niCk cAMel

6
@niCkcAMel "Titre" est ce qui s'affiche si vous passez la souris sur l'image. "texte alternatif" est ce qui est affiché, à la place, si l'image ne peut pas être affichée.
chris

2
«Essayez de mettre l'image dans le même fichier»: est-ce que c'est censé être fichier -> dossier ?
patrick

60

Ce qui suit fonctionne avec un chemin relatif vers une image dans un sous-dossier à côté du document (actuellement testé uniquement sur un système Windows):

![image info](./pictures/image.png)

1
IMHO la meilleure réponse, fonctionne avec un fichier de démarque GitHub de la manière souhaitée.
Erich Kuester

La meilleure réponse!
Zahra Taheri le

21

La meilleure solution consiste à fournir un chemin relatif au dossier dans lequel se trouve le document md.

Un navigateur a probablement des problèmes lorsqu'il tente de résoudre le chemin absolu d'un fichier local. Cela peut être résolu en accédant au fichier via un serveur Web, mais même dans cette situation, le chemin de l'image doit être correct.

Avoir un dossier au même niveau du document, contenant toutes les images, est la solution la plus propre et la plus sûre. Il se chargera sur GitHub, serveur Web local et local.

images_folder/img.jpg  < works


/images_folder/img.jpg  < this will work on webserver's only (please read the note!)

En utilisant le chemin absolu, l'image ne sera accessible qu'avec une URL comme celle-ci: http: //hostname.doesntmatter/image_folder/img.jpg


1
+1 pour "La meilleure solution est de fournir un chemin relatif au dossier où se trouve le document md." Il a montré les images sur ma machine locale.
MasterJoe

17

PAS À PAS :

  1. Créez un répertoire nommé comme Images et mettez toutes les images qui seront rendues par le Markdown.

  2. Par exemple, mettez example.png dans Images .

  3. Pour charger example.png qui se trouvait auparavant sous le répertoire Images .

![title](Images/example1.png)

Remarque : le répertoire des images doit être situé sous le même répertoire de votre fichier texte de démarque qui a l'.mdextension.


Quel est le chemin de ce dossier "Images"? L'avez-vous ajouté à une configuration dans vscode?
K_dev le

1
Le répertoire @K_dev "images" doit être situé sous le même répertoire que votre fichier texte de démarque qui a l'extension ".md". Je n'ai ajouté aucune configuration à vscode.
nevzatseferoglu le

14

Pour ajouter une image dans le fichier markdown, le fichier .md et l'image doivent se trouver dans le même répertoire. Comme dans mon cas, mon fichier .md était dans le dossier doc, j'ai donc également déplacé l'image dans le même dossier. Après cela, écrivez la syntaxe suivante dans le fichier .md

![alt text](filename)

comme ![Car Image](car.png)

Cela a fonctionné pour moi.


7

L'ajout d'une image locale a fonctionné pour moi comme suit: ![alt text](file://IMG_20181123_115829.jpg)

Sans le file://préfixe, cela ne fonctionnait pas (Win10, Notepad ++ avec l'addon MarkdownViewer ++)

Edit: j'ai découvert que cela fonctionnait également avec les balises html, et c'est bien mieux: <img src="file://IMG_20181123_115829.jpg" alt="alt text" width="200"/>

Edit2: Dans l'éditeur Atom, cela ne fonctionne que sans le file://préfixe. Quel bordel.


3

À ma connaissance, pour VSCode sous Linux, l'image locale ne peut normalement être affichée que lorsque vous placez l'image dans le même dossier que votre .mdfichier de publication.
c'est à dire seulement ![](image.jpg)ou ![](./image.jpg)fonctionnera.
Même le chemin absolu ![](/home/bala/image.jpg)ne fonctionne pas non plus.


3

Édité:

Travailler pour moi (pour l'image locale)

![system schema](doc/systemDiagram.jpg)

 tree
 ├── doc
     └── jobsSystemSchema.jpg
 ├── README.md

Le fichier markdown README.md est au même niveau que le répertoire doc.

Dans votre cas, votre fichier de démarque doit être au même niveau que les fichiers de répertoire.

Travailler pour moi (URL absolue avec chemin brut)

![system schema](https://server/group/jobs/raw/master/doc/systemDiagram.jpg)

Ne fonctionne pas pour moi (URL avec chemin blob)

![system schema](https://server/group/jobs/blob/master/doc/systemDiagram.jpg)

Je pense que votre URL n'est pas valide: il manque une barre oblique après https. Un peu tard, peut-être. :)
Funder

Merci @Funder, j'ai corrigé l'url, c'était une faute de frappe. 😉
Lingjing France

2

Une autre possibilité pour l'image locale non affichée est le retrait involontaire de la référence de l'image - espaces avant ![alt text](file).

Cela en fait un "bloc de code" au lieu de "l'inclusion d'image". Supprimez simplement les espaces de début.


1

J'ai eu des problèmes avec l'insertion d'images dans R Markdown. Si je fais l'URL entière: C:/Users/Me/Desktop/Project/images/image.pngcela a tendance à fonctionner. Sinon, je dois mettre la démarque dans le même répertoire que l'image ou dans un répertoire ancêtre de celle-ci. Il semble que le répertoire de tricot déclaré soit ignoré lors du référencement des images.


Cela ne répond pas à la question. Vous pouvez rechercher des questions similaires ou vous référer aux questions associées et liées sur le côté droit de la page pour trouver une réponse. Si vous avez une question connexe mais différente, posez une nouvelle question et incluez un lien vers celle-ci pour vous aider à fournir un contexte. Voir: Posez des questions, obtenez des réponses, pas de distractions
Shanteshwar Inde

1

En fonction de votre outil, vous pouvez également injecter du HTML dans le démarquage.

<img src="./img/Isolated.png">

Cela suppose que votre structure de dossiers est:

 ├── img
     └── Isolated.jpg
 ├── README.md

0

Placez l'image dans le même dossier que le fichier markdown ou utilisez un chemin relatif vers l'image.


0

copiez simplement l'image et collez-la, vous obtiendrez la sortie

![image.png](attachment:image.png)

0

Dans Jupyter Notebook Markdown , vous pouvez utiliser

<img src="RelPathofFolder/File" style="width:800px;height:300px;">

a fait une modification rapide (et une correction de faute de frappe) pour faciliter la lisibilité, devrait être le bon lien mais vaut la peine d'être vérifié au cas où :)
Daniel Brose

1
Pro: ajout de la personnalisation HTML à l'aide d'une <img >balise
Sumanth Lazarus

-2

Pas besoin de configurer un serveur Web

J'ai essayé de télécharger mon image locale dans la section des commentaires de l'essentiel et j'ai simplement copié et collé l'URL générée. A travaillé pour moi 😊

entrez la description de l'image ici


-3

J'ai une solution:

a) Exemple Internet:

![image info e.g. Alt](URL Internet to Images.jpg "Image Description")

b) Exemple d'image locale:

![image Info](file:///<Path to your File><image>.jpg "Image Description")
![image Info](file:///C:/Users/<name>/Pictures/<image>.jpg "Image Description")

TurboByte

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.