Ako pridať obrázok do dokumentu Markdown

Vizuálne informácie sa vnímajú oveľa ľahšie a efektívnejšie ako jednoduchý text. Preto sa hovorí, že obrázok je hodný tisícov slov. Preto možno budete chcieť do svojho dokumentu alebo príspevku na blogu pridať aj obrázok. Nižšie uvádzame niekoľko jednoduchých spôsobov, ako pridať obrázok do publikácie alebo dokumentu markdown.

Markdown je jednoduchý a ľahko použiteľný značkovací jazyk, ktorý možno použiť na formátovanie takmer akéhokoľvek dokumentu. Ak sa o ňom chcete dozvedieť viac, prečítajte si Sprievodca Markdown.

Ako pridať obrázok zo súboru

Predpokladajme, že obrázky, ktoré potrebujete, sa nachádzajú v priečinku images:

1
2
3
4
5

 ├─ images
     └─ picture.jpg
     └─ picture-2.jpg
     └─ picture-three.jpg
 ├─ README.md

Dôležité: Majte na pamäti, že ak názov súboru obsahuje zátvorky alebo iné špeciálne znaky, obrázok sa nemusí zobraziť. Ak chcete vedieť, ako správne pomenovať súbory pre webové projekty, pozrite si tieto pokyny pre názvy súborov vo webových projektoch.

Prvý spôsob, ako vložiť lokálny obrázok do dokumentu markdown, je použiť nasledujúci kód:

1

![Image description](/images/picture.jpg)

Časť v hranatých zátvorkách je takzvaný alternatívny text, ktorý je dôležitý z nasledujúcich dôvodov:

1. Kvôli prístupnosti. Programy na čítanie obrazovky to čítajú. Napríklad pre osoby so zrakovým postihnutím.

2. Tento text sa zobrazí namiesto obrázka, ak sa súbor s obrázkom nedá z nejakého dôvodu načítať.

3. Poskytuje kontext a opis obrázka pre vyhľadávače, čím im pomáha pri jeho vyhľadávaní.

Časť v zátvorkách je cesta k súboru. Všimnite si znak / pred znakom images. Bez tohto symbolu sa dokument môže normálne zobraziť na vašom počítači, ale po odoslaní na server na internete sa môže prestať zobrazovať. Je to jeden z hlavných dôvodov, prečo sa to stáva.

Ďalší spôsob, ako zobraziť lokálny obrázok pri publikovaní v markdown, je použiť značku image v tele dokumentu:

1

<image src="/images/picture.jpg" alt="Image description">

Jednou z výhod tejto metódy je, že takto môžete používať ďalšie funkcie ovládania obrazu. Špecifiká závisia od zdroja, na ktorom dokument publikujete.

Obidve metódy vám prinesú požadované výsledky, takže výber je na vás.

Ako pridať obrázok z odkazu

Keď potrebujete vložiť obrázok do dokumentu, ktorý sa nachádza niekde na internete, stačí použiť odkaz na obrázok:

1

![Image description](https://picsum.photos/800/600)

alebo

1

<image src="https://picsum.photos/800/600" alt="Image description">

Ako pridať titulok k obrázku

Do kódu markdown stačí pridať text v úvodzovkách oddelený medzerou:

1

![Image description](/images/picture.jpg "Image caption")

V kóde HTML musíte použiť atribút caption:

1
2
3
4

<image
  src="/images/picture.jpg"
  alt="Image description"
  caption="Image caption">

Ako pridať rámik k obrázku

Niekedy je potrebné pridať okolo obrázka rámik. Napríklad ak obrázok a stránka majú rovnaké pozadie a obrázok je potrebné vizuálne oddeliť.

Obrázok vo formáte markdown nemá možnosť pridávať štýly dizajnu, takže to tu nie je možné. Môžete skúsiť pridať špeciálny atribút do značky img ako v nasledujúcom kóde:

1

<img src="/images/picture.jpg" border="5px solid red"/>

Ale bohužiaľ, ani to nebude fungovať. Rámček sa nezobrazí.

Napriek tomu existuje riešenie, a to dosť nezvyčajné. Nájdete ho na stránke StackOverflow. Jediné, čo musíte urobiť, je obklopiť tag image ďalším tagom - kbd:

1
2
3

<kbd>
  <img src="/images/picture.jpg" />
</kbd>

Paráda!

😎