React Image src

1. Referenzieren eines lokalen Images in React mit dem Paket create-react-app
2. Laden ein Bild mit der Anweisung import in React
3. Laden ein Bild mit der Methode require() in React
4. Wie import und require() in React funktionieren

Wenn Sie React noch nicht kennen, haben Sie wahrscheinlich bemerkt, dass React eine HTML-ähnliche Syntax namens JSX verwendet. Diese Syntax bietet eine einfache Möglichkeit, React-Anwendungen zu schreiben. Wenn es darum geht, Bilder in die App einzubinden, wird es etwas matschig. Im Gegensatz zu HTML durchläuft der React-Code viele Änderungen, bevor er den Benutzern angezeigt wird.

Beim Wechsel vom Entwicklungs- in den Produktionsmodus kann sich die relative Position der Bilder ändern. Sie benötigen eine zuverlässige Methode zum Importieren und Einbinden von Bildern in Ihre React-Komponenten.

Referenzieren eines lokalen Images in React mit dem Paket create-react-app

Bei der Entwicklung einer React-Anwendung können Sie problemlos ein Image einbinden, solange Ihre Entwicklungsumgebung webpack enthält. Bei Verwendung des Pakets create-react-app ist webpack automatisch enthalten.

Das Element-Tag in JSX funktioniert genauso wie in HTML - es ist ein selbstschließendes img-Tag. Entwickler können das Attribut src verwenden, um den Pfad anzugeben. In diesem Beispiel verwendet das Element <img/> eine hartcodierte Bild-URL als Quelle:

class App extends Component {
  render() {
    return <img src="https://cdn.pixabay.com/photo/2021/09/02/16/48/cat-6593947_960_720.jpg"/>
  }
}

Wenn Sie einen relativen Pfad zum Bildspeicherort innerhalb des Ordners angeben möchten, wird es etwas komplizierter. Die Bereitstellung einer Quelle für ein Bild ist nicht so einfach wie das Setzen des Attributs src auf einen relativen Dateipfad auf dem Computer. Zunächst einmal können Sandbox-Browser nicht auf den relativen Dateipfad src Ihres Computers zugreifen. Sie können sich insbesondere nicht auf den lokalen Pfadnamen verlassen, nachdem die Anwendung bereitgestellt wurde. Stattdessen müssen Entwickler entweder die Anweisungen import oder require() verwenden, um das Bild zu laden.

Bei der Entwicklung eines create-react-app-Projekts empfiehlt es sich, einen Asset-Ordner zu haben, in dem alle Ihre Bilder gespeichert werden. Normalerweise wird dieser Ordner im Ordner src Ihres Projekts erstellt. Angenommen, Sie befolgen diese Konvention zum Speichern der Bilder, sehen wir uns an, wie Sie Bilder importieren und als Wert für das Attribut src verwenden.

Laden ein Bild mit der Anweisung import in React

Sie können auch die Anweisung import verwenden, um ein Bild zu laden. Sie sieht unkompliziert aus und erreicht dasselbe Ziel wie eine hartcodierte URL:

import React, { Component } from "react";
import image from "./assets/cat.jpg";
export default class testComponent extends Component {
  render() {
    return (
      <div>
        <img src={image} />
      </div>
    );
  }
}

Solange Sie einen gültigen Pfad angeben, sollte Ihre create-react-app ein Bild anzeigen.

In diesem Fall funktioniert der Pfad, da sich sowohl die Ordner testComponent als auch assets im Ordner src befinden. Die Endung des Pfades - cat.jpg ist nur ein Name der einzelnen Datei.

Die import-Anweisung bietet einen zusätzlichen Vorteil, das importierte Asset in einer Variablen zu speichern. Wenn Sie dem Attribut src einen Wert setzen, können Sie den Variablennamen aus der Importanweisung referenzieren. <img src={image} />

Weitere Informationen zum Import finden Sie hier.

Laden ein Bild mit der Methode require() in React

React-Entwickler verwenden die Methode require(), um verschiedene Modultypen zu laden. Es kann auch zum Laden von Bildern verwendet werden.

Wenn Sie es innerhalb von JSX verwenden möchten, muss die Methode require() zwischen geschweiften Klammern platziert werden. Wie Sie vielleicht wissen, wird der Code zwischen geschweiften Klammern in JSX als gültiges JavaScript interpretiert.

<img src={require("./assets/cat.jpg").default} />

Die Methode require() benötigt ein Argument, einen gültigen relativen Pfad zu einem Bild. Beachten Sie auch, dass Sie in einigen Browsern auf die Eigenschaft .default des zurückgegebenen Objekts zugreifen müssen.

Alternativ können Sie eine Variable image erstellen, um Ihr Bild zu speichern, und dann in Ihrer Komponente darauf verweisen. Hier ist ein Beispiel:

const image = require("./assets/cat.jpg").default;
export default class testComponent extends Component {
  render() {
    return (
      <div>
        <img src={image} />
      </div>
    );
  }
}

Sie können der Variablen einen beliebigen Namen geben. Es muss nicht Bild heißen.

Denken Sie daran, dass Sie, wenn Sie in React auf eine JavaScript-Variable verweisen möchten, diese in geschweifte Klammern einschließen müssen.

Bezüglich der Performance gibt es keinen Unterschied zwischen der Methode require() und der Anweisung import.

Wie import und require() in React funktionieren

Einige React-Entwickler werden es vielleicht überraschen, dass webpack (und andere Bundler) das Laden von Bildern handhaben, nicht JavaScript oder React.

Wenn Sie ein Bild in eine Komponente laden, zeichnet der Bundler intern die Zuordnung zwischen der Komponente und dem Bild auf. Anschließend wird das Asset bezogen, kopiert, mit einem eindeutigen Namen versehen und im zugänglichen Verzeichnis auf dem Server abgelegt.