Bilder

Die meisten Websites zeigen nicht nur Text. Oft werden auch Bilder oder andere Medien eingesetzt. Wenn man in React entwickelt, kann man selbstverständlich <img /> Tag verwenden. Erfahre hier wie man korrekt die Bilder während der Entwicklung und in Production verwendet.

Bei der Verwendung von Bildern in React gibt es zwei wichtige Regeln zu beachten.

Das <img /> Tag muss immer geschlossen werden.
Wenn lokale Bilder, lagernd innerhalb des /src Ordners, in Components verwendet werden, müssen diese vor der Verwendung in der jeweiligen .jsx Datei importiert werden.

React Projekte haben einen bestimmten Build-Prozess. Bei den meisten Projekten wird die finale Projekt-Struktur, die auf dem Produktionsserver ausgerollt wird, sich von der Entwicklungs-Struktur unterscheiden. Auf dem Produktionsserver wird es den Ordner /src nicht geben. Verwendet man also irgendwo src bei der Pfadangabe in einem img Tag, wird dieses Bild auf dem Server nicht geladen.

Man kann vor dem Build-Prozess nicht genau sagen, welche Namen die Dateien im Ordner assets haben werden. Basierend darauf kann man auch nicht im Voraus sagen, wie der korrekt Pfad lauten wird.

Auf dem folgenden Bild sieht man, wie beispielhaft die generierten Bilder nach dem Build-Prozess (npm run build) aussehen können.

Um also korrekt ein Bild in einem Component zu verwenden, muss dieses, mit der Angabe des relativen Pfads vom Component zum assets Ordner (oder dem Ordner, indem die Bilder liegen), importiert werden.

Im folgenden Beispiel sind folgende Pfade gültig.

Component: /src/components/images/ImageImport.jsx
Bild: /src/assets/sample_image.jpg

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

const ImageImport = () => {
    return (
        <div className="sample_image_wrapper">
            <img src={sampleImage} />
        </div>
    );
};

export default ImageImport;

Mit dieser Konfiguration wird das Bild im Browser korrekt angezeigt.

React Component - Render image

Wichtige Ausnahme

Wenn man eine Bild-Datei oder generell irgendeine Datei im Order public/ speichert, dann kann man auch direkten Pfad verwenden.

Der Pfad zum public Ordner ändert sich nicht. Der public Ordner selbst wird ebenfalls auch auf dem Server vorhanden sein und die darin liegenden Dateien werden nicht modifiziert.

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

export default ImagePublic;

Hier funktioniert die Ausgabe direkt, ohne Modifikation.

React Component - Render image from public

navigation Navigation

Bilder