KäyttötapauksetEsimerkit

Kuinka Base64-kuvia käytetään

Yleisimmät käyttötapaukset ja suoraan kopioitavat esimerkit. Korvaa arvot omillasi ja testaa heti

Saat kaksi muotoa: Data URL (sisältää MIME-etuliitteen) ja raaka Base64 (ilman etuliitettä)

Data URL (suositeltu)

data:image/png;base64,QUJDZA==

Raaka Base64

QUJDZA==

Näytä suoraan verkkosivulla (HTML)

Sopii nopeaan esikatseluun ja sivuille ilman erillistä kuvatallennusta

<img
  src="data:image/png;base64,QUJDZA=="
  alt="Base64 Image"
  width="240"
/>

Taustakuvana (CSS)

Hyvä kuvakkeille ja paikkamerkeille, vähentää resurssipyyntöjä

.banner {
  background-image: url("data:image/png;base64,QUJDZA==");
  background-size: cover;
  background-position: center;
}

Rajapinta / JSON-siirto

Sopii testaukseen ja prototyyppeihin. Suurten kuvien pitkäaikainen inline-käyttö ei ole suositeltavaa

{
  "filename": "image.png",
  "mime": "image/png",
  "dataUrl": "data:image/png;base64,QUJDZA=="
}

Jos palvelin tarvitsee vain raakan Base64:n, lähetä QUJDZA== ja MIME-tyyppi erikseen.

Mobiili / monialustainen käyttö

Kaikki Base64:ää tukevat ympäristöt voivat käyttää tätä. Alla yleisiä esimerkkejä

import 'dart:convert';
import 'package:flutter/widgets.dart';

final bytes = base64Decode("QUJDZA==");
final image = Image.memory(bytes);

Milloin Base64 ei ole hyvä valinta?

Base64 sopii datan siirtoon ja nopeaan käyttöön, ei staattisten resurssien korvaajaksi