CDRN

Generoi placeholder-kuva

  • Dokumentaatio
  • API

Kuinka sitä käytetään?

Määritä haluamasi kuvan koko suoraan kutsun URL-osoitteessa. Voit käyttää generoituja kuvia HTML- tai CSS-koodissasi esimerkin mukaisesti.

Ensimmäinen parametri määrittää kuvan leveyden.

Toinen parametri määrittää kuvan korkeuden. Tämä on valinnainen. Jos sitä ei määritetä, korkeus on sama kuin kuvan leveys (kuva on neliö).


        <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">
placeholder image placeholder image placeholder image

Esimerkkejä

Neliönmuotoiset kuvat


        <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">
placeholder image placeholder image placeholder image placeholder image

Kuvat, joilla on tietty korkeus


        <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">
placeholder image placeholder image placeholder image placeholder image

Usein kysytyt kysymykset

Missä muodossa generoitu kuva toimitetaan?

Kuvat palautetaan JPEG-muodossa, joka on optimoitu verkkoon. Tiedostokoko pysyy pienenä myös suurilla mitoilla, mikä tekee työkalusta sopivan HTML- ja CSS-malleihin, jotka sisältävät paljon paikkamerkkejä. Visuaalinen sisältö on liukuväri tai neutraali täyttöväri, ei koskaan oikea valokuva, johon liittyy tekijänoikeuksia.

Onko generoitujen kuvien koolle rajoitusta?

Kohtuulliset mitat ovat 16 px:stä noin 2000 px:iin per sivu. Tämän yli renderöinti ei edelleen mahdollista, mutta generointi hidastuu ilman todellista hyötyä, koska paikkamerkit on tarkoitettu vaatimattomampiin malleihin. 1920 x 1080 -kokoiseen hero-kuvaan työkalu vastaa ongelmitta.

Onko URL vakaa ja käytettävissä tuotannossa?

URL /image/<leveys>/<korkeus> on deterministinen, voit liittää sen sellaisenaan <img>-tageihisi ilman ennakkoon lataamista. Tuotantoympäristössä on suositeltavaa isännöidä lopulliset kuvat itse: tämä palvelu ei ole ensisijaisesti tarkoitettu malleihin, storybookeihin ja integraatiotesteihin.

Mitä eroa on Lorem Picsumiin tai Placeholder.comiin?

Lorem Picsum palauttaa aitoja satunnaisia valokuvia, jotka tuovat realistisuutta malliin. Placeholder.com tarjoaa kuvia, joissa on kokomerkinnät. cdrn-generaattori palauttaa yksinkertaisia ja nopeita paikkamerkkejä ilman ulkoisia kutsuja tai kolmannen osapuolen riippuvuuksia front-end-projektissasi.

Voiko paikkamerkin värin valita?

Ei tässä versiossa. Kuvat generoidaan ennalta määritetyllä neutraalilla ulkoasulla. Jos sinun on hallittava tarkasti taustaväriä layoutin kontrastien validoimiseksi, luo muutaman kilotavun kokoinen staattinen tiedosto haluamallasi sävyllä tai käytä suoraan CSS-div-elementtiä, jossa on background-color.

Mitä hyötyä tästä on front-end-kehittäjälle?

Testata nopeasti layoutia ilman todellista kuvaa, validoida ruudukon responsiivisuus kokeilemalla eri suhteita, syöttää tietoja storybookiin tai Figma-to-HTML-esikatseluun. Markkinoijille ja suunnittelijoille työkalu on hyödyllinen korkeatasoisen wireframen luonnosteluun ilman lisenssivapaita valokuvia.

tämä työkalu ei tarjoa suoritus-API:a