Jak dodać obraz w Markdown:wykrzyknik, tekst alternatywny, ścieżka.

Składnia

![Alt text](path/to/image.png "Optional title")

• Tekst alternatywny w nawiasach kwadratowych opisuje obraz czytnikom ekranu i pokazuje się, jeśli obraz się nie wczyta. Napisz, co przedstawia obraz, a nie "obraz".
• Ścieżka idzie w nawiasach okrągłych. Jeśli ma spacje, zapisz je jako %20 lub ujmij ścieżkę w nawiasy ostre.
• Tytuł to opcjonalny tekst w cudzysłowie, zwykle pokazywany jako podpowiedź po najechaniu.

Działa też styl referencyjny, który trzyma długie adresy poza tekstem:

![Logo][logo]

[logo]: https://example.com/logo.png "DotMD logo"

Ścieżki względne i miejsce pliku

Ścieżka bez schematu jest względna do pliku Markdown, a nie do miejsca, z którego otwarto aplikację. Przy takim układzie plików

docs/
  spec.md
  assets/
    flow.png

obraz w spec.md to ![Przepływ](assets/flow.png). Z pliku o folder wyżej napisz docs/assets/flow.png, a z folderu niżej ../assets/flow.png. Na GitHubie ścieżka zaczynająca się od / jest względna do katalogu głównego repozytorium. Trzymaj obrazy obok dokumentu, w folderze assets, żeby przeniesienie folderu przenosiło też obrazy.

Nazwy plików obrazów rozróżniają wielkość liter na serwerach Linux, choć Mac jej nie rozróżnia, co jest częstym powodem, dla którego obraz działa lokalnie, a online się psuje.

Jak ustawić rozmiar obrazu

Sam Markdown nie ma rozmiaru. Użyj znacznika HTML img z szerokością; wysokość wynika z proporcji:

<img src="assets/screen.png" alt="Settings window" width="400">

Szerokość i wysokość podaje się w pikselach, a wartość procentowa, np. width="50%", działa w większości aplikacji. GitHub obsługuje ten znacznik w README i komentarzach. Niektóre aplikacje przyjmują też rozmiar w tekście alternatywnym, np. ![Zrzut ekranu|400](assets/screen.png). Ta forma pochodzi z Obsidiana i DotMD ją czyta, ale inne aplikacje pokażą |400 jako część tekstu alternatywnego, więc dla pliku, który ma działać wszędzie, użyj znacznika HTML. W komórce tabeli kreskę pionową trzeba zapisać jako \|.

Wyrównanie i podpisy

Wyrównanie i podpisy to także HTML. Aby wyśrodkować obraz, umieść go w akapicie z align:

<p align="center">
  <img src="assets/logo.png" alt="Logo" width="200">
</p>

Dla podpisu użyj figure z figcaption:

<figure>
  <img src="assets/flow.png" alt="Request flow" width="500">
  <figcaption>Figure 1. The request flow.</figcaption>
</figure>

Nie każda aplikacja zachowuje te znaczniki; GitHub większość tak, a DotMD pokazuje oba. Jeśli potrzebujesz podpisu, który działa wszędzie, wstaw zamiast tego linię kursywą pod obrazem: *Rysunek 1. Przepływ żądania.*.

Klikalny obraz i inne sztuczki

Umieść obraz wewnątrz linku, by był klikalny:

[![Build status](https://example.com/badge.svg)](https://example.com/builds)

Tak buduje się plakietki na górze README. Aby pokazać inny obraz w trybie ciemnym, użyj elementu picture z <source media="(prefers-color-scheme: dark)">, tam gdzie aplikacja to obsługuje.

Tekst alternatywny, rozmiar pliku i formaty

Pisz tekst alternatywny tak, jakbyś opisywał obraz przez telefon: Okno ustawień z włączoną opcją Sync mówi więcej niż zrzut ekranu. Dla obrazu czysto dekoracyjnego zostaw puste nawiasy, by czytnik ekranu go pominął.

Używaj PNG dla zrzutów ekranu i diagramów, JPEG dla zdjęć, SVG dla logo i grafik liniowych, a pliki niech będą małe: zrzut o rozmiarze 6 MB spowalnia README i repozytorium. Większość aplikacji pokazuje też animowane GIF-y jak każdy inny obraz.

Dlaczego obraz się nie wyświetla

• Ścieżka jest błędna. Sprawdź ją od folderu pliku Markdown i sprawdź wielkość liter w nazwie pliku.
• Brak wykrzyknika. Bez niego dostajesz link, a nie obraz.
• Spacja w ścieżce bez ucieczki.
• Plik lokalny na stronie online. Ścieżka do pliku na twoim dysku działa tylko na twoim dysku.
• Zablokowany obraz zdalny. Niektóre aplikacje nie ładują obrazów z sieci, dopóki im na to nie pozwolisz.

Aby zobaczyć, jak obraz będzie wyglądał, otwórz plik w czytniku, który rozwiązuje ścieżki względem dokumentu. DotMD to robi: obrazy nie są szersze niż kolumna tekstu, znacznik HTML z szerokością jest respektowany, a zrzut ekranu wklejony w edytorze trafia do folderu assets obok pliku. Czytanie jest bezpłatne.

Pytania o obrazy w Markdown

Więcej pytań