Bilder

Zwei wichtige Regeln

• Der <img />-Tag muss in JSX selbstschließend sein (oder mit explizitem </img>-Close — selbstschließend ist üblicher).
• Lokale Bilder aus /src müssen importiert werden, damit der Build-Prozess sie erkennt und in der finalen dist/-Struktur korrekt platziert.

import bild from './assets/foto.jpg';

const MinimalImage = () => {
    return <img src={bild} alt="Beispielfoto" />;
};

Import aus /src — vom Bundler verarbeitet

Build-Tools wie Vite, Webpack oder Parcel transformieren Bilder, die per import referenziert werden: sie kopieren die Datei in den Output-Ordner, hängen einen Content-Hash an den Dateinamen (foto.a1b2c3.jpg) und ersetzen den Import-Wert durch den finalen URL.

import sampleImage from '../../assets/sample_image.jpg';

const ImageImport = () => {
    return (
        <div className="sample-image-wrapper">
            <img src={sampleImage} alt="Beispielbild" />
        </div>
    );
};

export default ImageImport;

Vorteile dieses Pattern:

• Cache-Busting: Hash im Dateinamen → Browser lädt das Bild bei Änderungen neu.
• Tree-Shaking: Nicht importierte Bilder landen nicht im Bundle.
• Inline für kleine Bilder: Bei Bedarf inlinet der Bundler kleine Bilder als Data-URLs (konfigurierbar).

Die generierten Dateinamen ändern sich pro Build:

Direkter Pfad aus /public

Dateien im public/-Ordner werden unverändert in das Build-Output kopiert. Der Pfad ist absolut und stabil — kein Import nötig.

const ImagePublic = () => {
    return <img src="/images/react_project.jpg" alt="React Projekt" />;
};

Wann /public statt /src?

• Bilder, die dynamisch per externer URL/CMS gewählt werden und nicht vorab bekannt sind.
• Dateien, die mit stabilem Pfad referenziert werden müssen (z.B. og:image-Meta-Tags, favicon).
• Assets, die explizit ohne Hash ausgeliefert werden sollen (z.B. robots.txt, sitemap.xml).

Nachteil: kein Cache-Busting bei Änderungen — Browser cachen das alte Bild ggf. lange.

alt-Attribut — Accessibility-Pflicht

Jedes <img> braucht ein alt-Attribut. Es beschreibt das Bild für Screen-Reader und wird angezeigt, wenn das Bild nicht lädt.

// Inhaltliches Bild: aussagekräftiges alt
<img src={logo} alt="mibeon Logo" />

// Dekoratives Bild: leerer alt — Screen-Reader überspringt
<img src={ornament} alt="" />

ESLint mit eslint-plugin-jsx-a11y warnt bei fehlendem alt. Faustregel:

• Inhaltliches Bild: kurze, aussagekräftige Beschreibung.
• Dekoratives Bild: alt="" (leer, aber vorhanden).
• Bild als Link: das alt beschreibt das Ziel des Links.

Lazy Loading

Mit loading="lazy" lädt der Browser ein Bild erst, wenn es in den Viewport scrollt — Performance-Boost auf bilderlastigen Seiten.

const Gallery = ({ images }) => {
    return (
        <div>
            {images.map((img) => (
                <img
                    key={img.id}
                    src={img.url}
                    alt={img.title}
                    loading="lazy"
                    width={400}
                    height={300}
                />
            ))}
        </div>
    );
};

width/height sind bei lazy-loaded Bildern wichtig — sie reservieren den Platz im Layout und vermeiden Cumulative Layout Shift (CLS, ein Core Web Vital).

Responsive Bilder mit srcset

Für mobile-vs-desktop unterschiedliche Bilder liefert srcset dem Browser eine Auswahl, aus der er die passende Auflösung wählt.

import small from './hero-small.jpg';
import medium from './hero-medium.jpg';
import large from './hero-large.jpg';

const Hero = () => {
    return (
        <img
            src={medium}
            srcSet={`${small} 480w, ${medium} 800w, ${large} 1200w`}
            sizes="(max-width: 600px) 480px, (max-width: 1024px) 800px, 1200px"
            alt="Hero-Bild"
        />
    );
};

Beachte: in JSX heißt das Attribut srcSet (camelCase), nicht srcset. Build-Tools können das srcset auch automatisch generieren (z.B. vite-imagetools).

Dynamische Bilder — Import in der Schleife

Wenn die Datei-Namen erst zur Laufzeit feststehen, kann man Bilder nicht per import einbinden. Drei Optionen:

// Option 1: alle Bilder vorab importieren, dann per Schlüssel auswählen
import imgA from './a.jpg';
import imgB from './b.jpg';
const imageMap = { a: imgA, b: imgB };

const ImageA = ({ name }) => <img src={imageMap[name]} alt="" />;

// Option 2: import.meta.glob (Vite-spezifisch) — alle passenden Dateien auf einmal
const modules = import.meta.glob('./images/*.jpg', { eager: true });
const images = Object.fromEntries(
    Object.entries(modules).map(([path, mod]) => [path, mod.default])
);

// Option 3: /public und direkter String-Pfad
const PublicImage = ({ name }) => (
    <img src={`/images/${name}.jpg`} alt="" />
);

Variante 1 funktioniert mit beliebigem Bundler. Variante 2 ist Vite-spezifisch. Variante 3 verzichtet auf Bundler-Optimierung, aber ist einfach.

Defekte Bilder behandeln

Mit onError lässt sich auf Lade-Fehler reagieren — z.B. Fallback-Bild oder Placeholder.

import fallback from './fallback.png';

const SafeImage = ({ src, alt }) => {
    const handleError = (e) => {
        e.currentTarget.src = fallback;
        // Wichtig: onError abklemmen, sonst Endlos-Loop falls auch fallback nicht lädt
        e.currentTarget.onerror = null;
    };

    return <img src={src} alt={alt} onError={handleError} />;
};

Weiterführende Ressourcen

Externe Quellen

• <img> – MDN
• Lazy loading via attribute – MDN
• Responsive images – MDN
• Vite – Asset Handling
• Cumulative Layout Shift – web.dev

Verwandte Artikel

• Styling
• Props
• Setup: Vite, Next.js & Create React App
• Einführung in Components
• Conditional Rendering