Basis64 is een methode voor het coderen van binaire gegevens in ASCII tekst. Voor het weergeven van Base64-afbeeldingen in HTML wordt gebruik gemaakt van de taggen met de src attribuut ingesteld op een Base64-gegevens-URL, die de afbeeldingsgegevens bevat gecodeerd als ASCII-tekst. Met deze methode worden afbeeldingen rechtstreeks in HTML ingesloten. Base64-afbeeldingen zijn gecodeerde binaire gegevens, waardoor afbeeldingen zonder afzonderlijke bestanden in webpagina's kunnen worden ingesloten.
Er zijn verschillende voordelen verbonden aan het weergeven van Base64-afbeeldingen in HTML.
- Sneller laden: Door afbeeldingsgegevens in te sluiten, worden HTTP-verzoeken verminderd, waardoor de laadtijden van pagina's worden versneld, vooral bij kleine afbeeldingen.
- Verbeterde beveiliging: Verbergt binaire gegevens, verbetert de vertrouwelijkheid en voorkomt ongeoorloofde toegang.
- Verbeterde compatibiliteit: Base64-afbeeldingen werken in alle moderne browsers en zorgen voor een consistente weergave.
- Vereenvoudigde ontwikkeling: Eenvoudiger beheer door afbeeldingen rechtstreeks in HTML te coderen, waardoor afzonderlijke bestandsverwerking wordt vermeden.
Benadering :
Weergeven Basis64 afbeeldingen in HTML omvat het converteren van binaire afbeeldingsgegevens naar een Base64-tekenreeks en deze vervolgens als gegevens in de HTML in te sluiten URL . Een gegevens-URL is een type van Uniforme bronidentificatie (URI) waarmee de afbeeldingsgegevens rechtstreeks in de broncode van een webpagina worden ingesloten. Hier leest u hoe u een Base64-afbeelding in HTML kunt weergeven.
c programma voor tweedimensionale array
- Converteer de afbeelding naar het Base64-formaat: U kunt een online Base64-encoder gebruiken om de binaire afbeeldingsgegevens naar een Base64-reeks te converteren. Het resultaat is een reeks tekens die eenvoudig in uw HTML-code kunnen worden ingesloten.
- Maak een gegevens-URL: De Base64-tekenreeks moet worden verpakt in een gegevens-URL-indeling. Het gegevens-URL-formaat bestaat uit drie delen: het gegevenstype, de Base64-gecodeerde gegevens en het einde van de URL. Voor een afbeelding zou het gegevenstype zijn gegevens:afbeelding/[formaat]; basis64, waarbij [format] het formaat van het afbeeldingsbestand is (bijv. PNG, JPEG, GIF ).
- Sluit de gegevens-URL in uw HTML in: Om de afbeelding weer te geven, kunt u een HTML-afbeeldingstag gebruiken (
) en stel de in src attribuut aan de gegevens-URL.
Bijvoorbeeld:
>
Hier is een voorbeeld van een HTML-programma dat laat zien hoe u Base64-afbeeldingen in HTML kunt weergeven. Laten we in dit voorbeeld zeggen dat we de volgende afbeelding hebben.
Voor Base64 houden we rekening met de gegevens-URL van de afbeelding, die in de src attribuut. De gegevens-URL bestaat uit twee delen
wat is jQuery
- Het eerste deel is de Base64-gecodeerde afbeelding.
- Het tweede deel is de Base64-gecodeerde tekenreeks van de afbeelding.
Voorbeeld 1:
HTML
Base64 Afbeelding Voorbeeldtitel> hoofd> Base64 Afbeelding Voorbeeldh1>
body>html>>
Uitgang:
Er is nog een voorbeeld van een HTML-programma dat demonstreert hoe Base64-afbeeldingen in HTML kunnen worden weergegeven. Laten we in dit voorbeeld zeggen dat we de volgende afbeelding hebben.
10 1 miljoen
Voor Base64 houden we rekening met de gegevens-URL van de afbeelding, die in de src attribuut. De gegevens-URL bestaat uit twee delen.
- Het eerste deel is de Base64-gecodeerde afbeelding.
- Het tweede deel is de Base64-gecodeerde tekenreeks van de afbeelding.
Voorbeeld 2:
10 miljoenHTML
Base64 Afbeelding Voorbeeldtitel> hoofd> Base64 Afbeelding Voorbeeldh1>
body>html>>
Uitgang:
Opmerking: Base64-afbeeldingen kunnen de interactiviteit van webpagina's verbeteren, maar kunnen leiden tot grotere bestandsgroottes en langzamere laadtijden. Reserveer ze voor kleine afbeeldingen, terwijl u voor grotere afbeeldingen vertrouwt op traditionele bestandshosting om de prestaties te optimaliseren.
Conclusie: Het weergeven van Base64-afbeeldingen in HTML kan verschillende voordelen bieden, waaronder snellere laadtijden van pagina's, verhoogde beveiliging, verbeterde compatibiliteit en vereenvoudigde ontwikkeling. Het is echter belangrijk om rekening te houden met de nadelen, zoals grotere bestandsgroottes en langere gegevensoverdrachttijden, wanneer u besluit of u Base64-afbeeldingen in uw projecten wilt gebruiken.