Jak přidat obrázek v Markdownu:vykřičník, alt text, cesta.

Syntaxe

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

• Alt text v hranatých závorkách popisuje obrázek čtečkám obrazovky a zobrazí se, když se obrázek nenačte. Napište, co obrázek ukazuje, ne „obrázek“.
• Cesta je v kulatých závorkách. Pokud obsahuje mezery, napište je jako %20 nebo cestu dejte do špičatých závorek.
• Titulek je nepovinný text v uvozovkách, obvykle se zobrazí jako bublina po najetí myší.

Funguje i odkazový styl, který udrží dlouhé adresy mimo text:

![Logo][logo]

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

Relativní cesty a kde soubor leží

Cesta bez schématu je relativní k souboru Markdown, ne k místu, kde jste otevřeli aplikaci. Při rozložení souborů

docs/
  spec.md
  assets/
    flow.png

je obrázek ve spec.md ![Flow](assets/flow.png). Ze souboru o složku výš napište docs/assets/flow.png, z podsložky ../assets/flow.png. Na GitHubu je cesta začínající / relativní ke kořeni repozitáře. Držte obrázky vedle dokumentu, ve složce assets, aby přesun složky přesunul i obrázky.

Názvy souborů obrázků rozlišují velikost písmen na serverech s Linuxem, i když Mac ji ignoruje, což je častý důvod, proč obrázek lokálně funguje a online ne.

Jak nastavit velikost obrázku

Samotný Markdown velikost nemá. Použijte HTML značku img se šířkou; výška se přizpůsobí proporcím:

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

Šířka a výška jsou v pixelech a procento, například width="50%", funguje ve většině aplikací. GitHub tuto značku podporuje v README a komentářích. Některé aplikace přijímají velikost i v alt textu, například ![Screenshot|400](assets/screen.png). Ta forma pochází z Obsidianu a DotMD ji čte, ale jiné aplikace zobrazí |400 jako součást alt textu, takže pro soubor, který musí fungovat všude, použijte HTML značku. V buňce tabulky se svislítko píše \|.

Zarovnání a popisky

Zarovnání a popisky jsou také HTML. Chcete-li obrázek vycentrovat, dejte ho do odstavce s align:

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

Pro popisek použijte figure s figcaption:

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

Ne každá aplikace tyto značky zachová; GitHub většinu ano a DotMD zobrazuje obě. Pokud potřebujete popisek, který funguje všude, dejte pod obrázek řádek kurzívou: *Figure 1. The request flow.*.

Klikací obrázek a další triky

Dejte obrázek dovnitř odkazu, aby byl klikací:

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

Tak se dělají odznaky na začátku README. Pro jiný obrázek v tmavém režimu použijte prvek picture se <source media="(prefers-color-scheme: dark)">, pokud to aplikace podporuje.

Alt text, velikost souboru a formáty

Alt text pište, jako byste obrázek popisovali po telefonu: Settings window with the Sync option turned on řekne víc než screenshot. U čistě dekorativního obrázku nechte závorky prázdné, aby ho čtečka obrazovky přeskočila.

PNG použijte pro snímky obrazovky a diagramy, JPEG pro fotografie, SVG pro loga a perokresby a soubory držte malé: snímek o 6 MB zpomaluje README i repozitář. Většina aplikací zobrazuje animované GIFy stejně jako jakýkoli jiný obrázek.

Proč se obrázek nezobrazuje

• Cesta je špatně. Zkontrolujte ji od složky souboru Markdown a zkontrolujte velikost písmen v názvu souboru.
• Chybí vykřičník. Bez něj dostanete odkaz, ne obrázek.
• Neescapovaná mezera v cestě.
• Místní soubor na online stránce. Cesta k souboru na vašem disku funguje jen na vašem disku.
• Blokovaný vzdálený obrázek. Některé aplikace nenačítají obrázky z webu, dokud to nepovolíte.

Chcete-li vidět, jak obrázek bude vypadat, otevřete soubor v čtečce, která zpracovává cesty relativně k dokumentu. DotMD to dělá: obrázky se zobrazí nanejvýš tak široké jako sloupec textu, HTML značka se šířkou se respektuje a snímek obrazovky vložený v editoru se uloží do složky assets vedle souboru. Čtení je zdarma.

Otázky k obrázkům v Markdownu

Další otázky