Statische Assets

Die Jutro-App (und die darauf basierenden Anwendungen) basieren auf create-react-app. Aus diesem Grund gelten die gleichen Tooling-Empfehlungen.

Speicherort statischer Assets

Apps, die von create-react-app erzeugt werden, verwenden das Verzeichnis ./public für die Aufbewahrung statischer Assets (Bilder usw.), die Jutro-App verwendet stattdessen ./src/assets.

Dieses benutzerdefinierte Verzeichnis wird mithilfe der paths.appPublic-Eigenschaft in ./overrides.config.js konfiguriert. Alle Dateien in diesem Verzeichnis sind statische Assets, auf die zur Laufzeit einfach verwiesen werden kann. Die einzige Ausnahme ist hier index.html, das sich innerhalb des Ordners ./html befindet.

Daten-URIs

Um Bündelungs- und Webpack-Probleme zu vermeiden, können Sie Daten-URIs für Bilder verwenden. Auf diese Weise referenzieren Sie keine Bilddatei, sondern betten das Bild in Ihre Quelle ein. Sie können Inline-SVGs in Eigenschaften verwenden:

<Image
  src="data:image/svg+xml;utf8,<svg ... > ... </svg>"
  alt="cooking apron"
/>

oder in CSS:

.background {
  background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
}

Sie können ein Bild auch in Base64 kodieren und es als Eigenschaft hinzufügen:

<Image
  alt=""
  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo etc"
/>

oder in CSS:

.background {
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo etc');
}

Referenzieren statischer Assets im Code

Je nach dem Ort, an dem sich die Referenz befindet, kann dies auf zwei Arten geschehen: gebündelt und ungebündelt.

Gebündelt

Um ein Asset zu bündeln, importieren Sie es in Ihren JavaScript-Code und verwenden es in einer Komponente:

import logo from '../images/logo.svg';

<img src={logo} />;

Weitere Informationen finden Sie hier in der Dokumentation zu create-react-app.

Ungebündelt

Sie können Assets aus Ihrem Verzeichnis für statische Assets auf eine von zwei Arten referenzieren:

aus HTML-Vorlagen mit dem %PUBLIC_URL%-Platzhalterpräfix, zum Beispiel:
```
<img src="%PUBLIC_URL%/<path-to-the-image-under-src-assets>" />
```

aus dem JS-Code (z. B. als Teil von render() der Komponente), mit Hilfe der env-Variable PUBLIC_URL, zum Beispiel:

render() {
    return (
        <img src={`${process.env.PUBLIC_URL}/<path-to-the-image-under-src-assets>`} />
    );
}

Dev vs. dist

Mit npm run build werden die statischen Assets von ./src/assets an einen geeigneten Speicherort im Unterverzeichnis ./dist kopiert, um die Assets auch während der Laufzeit verfügbar zu machen. Denken Sie daran, die mit PUBLIC_URL referenzierten Assets wie oben erwähnt beizubehalten. Diese Variable wird zur Build-Zeit durch React-Skripte an einem geeigneten Ort aufgelöst.

Speicherort statischer Assets​

Daten-URIs​

Referenzieren statischer Assets im Code​

Gebündelt​

Ungebündelt​

Dev vs. dist​