Placeholder kép generálása
- Dokumentáció
- API
Hogyan használjuk?
Adja meg a kívánt képméretet közvetlenül a hívási URL-ben. A generált képeket a példát követve felhasználhatja a HTML vagy CSS kódjában.
Az első paraméter határozza meg a kép szélességét.
A második paraméter határozza meg a kép magasságát. Ez opcionális. Ha nincs megadva, a magasság megegyezik a szélességgel (a kép négyzet alakú lesz).
<img src="https://cdrn.fr/60" alt="placeholder image">
<img src="https://cdrn.fr/120x100" alt="placeholder image">
<img src="https://cdrn.fr/80x100" alt="placeholder image">
Példák
Négyzet alakú képek
<img src="https://cdrn.fr/32" alt="placeholder image">
<img src="https://cdrn.fr/64" alt="placeholder image">
<img src="https://cdrn.fr/96" alt="placeholder image">
<img src="https://cdrn.fr/128" alt="placeholder image">
Képek konkrét magassággal
<img src="https://cdrn.fr/100x60" alt="placeholder image">
<img src="https://cdrn.fr/200x120" alt="placeholder image">
<img src="https://cdrn.fr/75x120" alt="placeholder image">
<img src="https://cdrn.fr/150x240" alt="placeholder image">
Gyakori kérdések
Milyen formátumban érkezik a generált kép?
A képek JPEG formátumban érkeznek, webes használatra optimalizálva. A fájlméret még nagy méretek esetén is minimális marad, így az eszköz alkalmas sok helyőrzőt (placeholder) tartalmazó HTML és CSS makettekhez. A vizuális tartalom egy gradiens vagy egy semleges kitöltőszín, soha nem egy valódi, szerzői jogvédelem alá eső fotó.
Van méretkorlát a generált képeknél?
Az ésszerű méretek oldanként 16 px és körülbelül 2000 px között mozognak. Ezen túlmenően a renderelés továbbra is lehetséges, de a generálás lassúvá válik valódi haszon nélkül, mivel a helyőrzők szerényebb makettekhez készültek. Egy 1920 x 1080-as hero kép esetén az eszköz gond nélkül válaszol.
Stabil az URL és használható éles (production) környezetben?
Az URL /image/<largeur>/<hauteur> determinisztikus, közvetlenül beillesztheti az <img> tag-ekbe előzetes letöltés nélkül. Éles környezetben célszerűbb a végleges képeket saját szerveren tárolni: ez a szolgáltatás elsősorban makettekhez, storybookokhoz és integrációs tesztekhez készült.
Mi a különbség a Lorem Picsum-hoz vagy a Placeholder.com-hoz képest?
A Lorem Picsum valódi véletlenszerű fotókat ad vissza, amelyek segítenek a makettek realisztikusabbá tételében. A Placeholder.com méretcímkével ellátott képeket szolgáltat. A cdrn generátor egyszerű és gyors helyőrzőket ad vissza, külső hívások és harmadik féltől származó függőségek nélkül a front-end projektben.
Megválasztható a helyőrző színe?
Ebben a verzióban nem. A képek előre meghatározott semleges megjelenéssel készülnek. Ha pontosan szabályoznia kell a háttérszínt a kontrasztos elrendezés ellenőrzéséhez, hozzon létre egy néhány kilobájtos statikus fájlt a kívánt színben, vagy használjon közvetlenül egy CSS div-et background-color-ral.
Milyen haszna van egy front-end fejlesztő számára?
Gyorsan tesztelhet egy elrendezést anélkül, hogy valódi képet kellene szolgáltatnia, ellenőrizheti egy rács válaszkészségét (responsivity) több képarány alkalmazásával, feltölthet egy storybookot vagy egy Figma-HTML előnézetet. A marketingesek és tervezők számára az eszköz segít nagy hűségű drótvázak vázolásában, licencelt fotóktól való függés nélkül.
ez az eszköz nem kínál végrehajtási API-t