Jak wyświetlić lokalny obraz w przecenach


143

Próbuję wykonać następujące czynności w Markdown, ale wydaje się, że nie działa, ktoś wie, jak wyświetlić lokalny obraz w Markdown? Nie chcę do tego konfigurować serwera WWW. Dzięki

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

Odpowiedzi:


108

Podejrzewam, że ścieżka jest nieprawidłowa. Jak wspomniał użytkownik7412219, system ubuntu i windows inaczej radzą sobie ze ścieżką. Spróbuj umieścić obraz w tym samym folderze co Twój Notatnik i użyj:

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

W systemie Windows pulpit powinien znajdować się w: C: \ Users \ jzhang \ Desktop


6
Co robi „Tytuł”?
NiCk Camel

6
@niCkcAMel „Tytuł” ​​jest wyświetlany po najechaniu myszą na obraz. Zamiast tego pojawia się „tekst alternatywny”, jeśli obraz nie może zostać wyświetlony.
chris,

2
„Spróbuj umieścić obraz w tym samym pliku”: czy to powinien być plik -> folder ?
patrick

60

Poniższe zasady działają ze względną ścieżką do obrazu do podfolderu obok dokumentu (obecnie testowane tylko w systemie Windows):

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

1
IMHO najlepsza odpowiedź, działa z plikiem przeceny GitHub w pożądany sposób.
Erich Kuester

Najlepsza odpowiedź!
Zahra Taheri

21

Najlepszym rozwiązaniem jest podanie ścieżki względem folderu, w którym znajduje się dokument md.

Prawdopodobnie przeglądarka ma kłopoty, gdy próbuje rozwiązać bezwzględną ścieżkę do pliku lokalnego. Można to rozwiązać, uzyskując dostęp do pliku przez serwer WWW, ale nawet w takiej sytuacji ścieżka obrazu musi być prawidłowa.

Najczystszym i najbezpieczniejszym rozwiązaniem jest posiadanie folderu na tym samym poziomie dokumentu, zawierającego wszystkie obrazy. Załaduje się na GitHub, lokalny, lokalny serwer WWW.

images_folder/img.jpg  < works


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

Korzystając ze ścieżki bezwzględnej, obraz będzie dostępny tylko pod takim adresem URL: http: //hostname.doesntmatter/image_folder/img.jpg


1
+1 dla „Najlepszym rozwiązaniem jest podanie ścieżki względem folderu, w którym znajduje się dokument md”. Pokazał obrazy na moim lokalnym komputerze.
MasterJoe

18

KROK PO KROKU :

  1. Utwórz katalog o nazwie Images i umieść wszystkie obrazy, które będą renderowane przez Markdown.

  2. Na przykład umieść przykład.png w Obrazy .

  3. Aby załadować przykład.png, który znajdował się wcześniej w katalogu Images .

![title](Images/example1.png)

Uwaga : katalog Images musi znajdować się w tym samym katalogu co plik tekstowy Markdown, który ma.mdrozszerzenie.


Jaka jest ścieżka do tego folderu „Obrazy”? Czy dodałeś to do dowolnej konfiguracji w vscode?
K_dev

1
Katalog @K_dev "images" musi znajdować się w tym samym katalogu, w którym znajduje się plik tekstowy markdown, który ma rozszerzenie ".md". Nie dodałem żadnej konfiguracji do vscode.
nevzatseferoglu

14

Aby dodać obraz w pliku markdown, plik .md i obraz powinny znajdować się w tym samym katalogu. Podobnie jak w moim przypadku mój plik .md znajdował się w folderze doc, więc również przeniosłem obraz do tego samego folderu. Następnie zapisz następującą składnię w pliku .md

![alt text](filename)

lubić ![Car Image](car.png)

To zadziałało dla mnie.


7

Dodanie lokalnego obrazu zadziałało dla mnie w następujący sposób: ![alt text](file://IMG_20181123_115829.jpg)

Bez file://prefiksu to nie zadziałało (Win10, Notepad ++ z dodatkiem MarkdownViewer ++)

Edycja: odkryłem, że działa również z tagami HTML, a to jest o wiele lepsze: <img src="file://IMG_20181123_115829.jpg" alt="alt text" width="200"/>

Edycja2: W edytorze Atom działa tylko bez file://prefiksu. Co za bałagan.


3

O ile mi wiadomo, w przypadku VSCode w systemie Linux obraz lokalny może być normalnie wyświetlany tylko wtedy, gdy umieścisz obraz w tym samym folderze co .mdplik postu.
czyli tylko ![](image.jpg)lub ![](./image.jpg)będzie działać.
Nawet ścieżka absolutna jak ![](/home/bala/image.jpg)również nie działa.


3

Edytowano:

Praca dla mnie (dla obrazu lokalnego)

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

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

Plik markdown README.md jest na tym samym poziomie, co katalog doc.

W twoim przypadku plik przeceny powinien znajdować się na tym samym poziomie, co pliki katalogów.

Praca dla mnie (bezwzględny adres URL z nieprzetworzoną ścieżką)

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

NIE działa dla mnie (adres URL ze ścieżką BLOB)

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

Myślę, że Twój adres URL jest nieprawidłowy: po https brakuje jednego ukośnika. Może trochę późno. :)
Funder

Dzięki @Funder, poprawiam adres URL, to był błąd podczas wpisywania. 😉
Lingjing France

2

Inną możliwością niewyświetlania obrazu lokalnego jest niezamierzone wcięcie odniesienia do obrazu - spacje przed ![alt text](file).

To sprawia, że ​​jest to „blok kodu” zamiast „włączanie obrazu”. Po prostu usuń wiodące spacje.


1

Miałem problemy z wstawianiem obrazów w R Markdown. Jeśli zrobię cały adres URL: C:/Users/Me/Desktop/Project/images/image.pngzwykle działa. W przeciwnym razie muszę umieścić przecenę w tym samym katalogu co obraz, albo w katalogu nadrzędnym. Wygląda na to, że zadeklarowany katalog dziewiarski jest ignorowany podczas odwoływania się do obrazów.


To nie daje odpowiedzi na pytanie. Aby znaleźć odpowiedź, możesz wyszukać podobne pytania lub zapoznać się z pytaniami pokrewnymi i połączonymi w prawej części strony. Jeśli masz podobne, ale inne pytanie, zadaj nowe pytanie i dołącz link do tego, aby uzyskać kontekst. Zobacz: Zadawaj pytania,
uzyskuj

1

W zależności od narzędzia - możesz także wstrzyknąć HTML do markdown.

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

Zakłada się, że struktura folderów jest następująca:

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

0

Umieść obraz w tym samym folderze co plik przeceny lub użyj względnej ścieżki do obrazu.


0

po prostu skopiuj obraz, a następnie wklej go, otrzymasz wynik

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


-2

Nie ma potrzeby konfigurowania serwera WWW

Próbowałem przesłać mój lokalny obraz w sekcji komentarzy w treści i po prostu skopiowałem i wklejiłem wygenerowany adres URL. Pracował dla mnie 😊

wprowadź opis obrazu tutaj


-3

Mam rozwiązanie:

a) Przykładowy Internet:

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

b) Przykładowy obraz lokalny:

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

TurboByte

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.