CDRN

Generer et placeholder-billede

  • Dokumentation
  • API

Hvordan bruger man det?

Angiv størrelsen på det ønskede billede direkte i den kaldende URL. Du kan bruge de genererede billeder i din HTML eller CSS ved at følge eksemplet

Den første parameter definerer billedets bredde

Den anden parameter definerer billedets højde. Denne er valgfri. Hvis den ikke er indstillet, vil højden være den samme som billedets bredde (billedet vil være firkantet). 


        <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

Eksempler

Firkantede billeder 


        <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

Billeder med bestemte højder 


        <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

Ofte stillede spørgsmål

I hvilket format vises det genererede billede?

Billeder returneres i JPEG-format, optimeret til internettet. Vægten forbliver minimal selv ved store dimensioner, hvilket gør værktøjet velegnet til HTML- og CSS-mockups, der indeholder en masse pladsholdere. Visuelt indhold er en gradient eller neutral fyldfarve, aldrig et rigtigt ophavsretligt beskyttet billede.

Er der en størrelsesgrænse for genererede billeder?

Rimelige dimensioner spænder fra 16 px til omkring 2000 px pr. side. Ud over det er gengivelse stadig mulig, men genereringen bliver langsom uden nogen reel brug, da pladsholdere er beregnet til mere beskedne modeller. For en heltevisuel på 1920 x 1080 reagerer værktøjet uden problemer.

Er URL'en stabil og brugbar i produktionen?

URL'en /image// er deterministisk, du kan indsætte den som den er i dine -tags uden først at downloade. For et produktionsmiljø skal du foretrække at være vært for de endelige billeder derhjemme: denne service er primært beregnet til modeller, historiebøger og integrationstests.

Hvordan adskiller det sig fra Lorem Picsum eller Placeholder.com?

Lorem Picsum returnerer rigtige tilfældige billeder, rart at give realisme til en model. Placeholder.com serverer mærkede billeder med dimensioner. cdrn-generatoren returnerer pladsholdere enkelt og hurtigt uden eksterne opkald eller tredjepartsafhængigheder i dit frontend-projekt.

Kan vi vælge farven på pladsholderen?

Ikke i denne version. Billeder genereres med en foruddefineret neutral gengivelse. Hvis du har brug for præcist at kontrollere baggrundsfarven for at validere et layout med kontraster, skal du oprette en statisk fil på et par kilobyte i den ønskede nuance eller direkte bruge en CSS div med baggrundsfarve.

Hvad er fordelene for en frontend-udvikler?

Test hurtigt et layout uden at skulle give et rigtigt billede, valider reaktionsevnen af et gitter ved at skubbe flere forhold, feed en historiebog eller en Figma-til-HTML-forhåndsvisning. For marketingfolk og designere bruges værktøjet til at skitsere high-fidelity wireframes uden at være afhængig af licenserede billeder.

dette værktøj tilbyder ikke et eksekverings-API