Einleitung
Bei der Entwicklung von Webanwendungen mit React möchten wir normalerweise visuelle Elemente einbeziehen, um das Interesse der Benutzer zu wecken. Diese visuellen Elemente können jede Art von Bild sein, einschließlich JPGs, PNGs, SVGs, GIFs und viele andere.
In diesem Artikel lernen wir, wie man Bilder mit React importiert und sehen die verschiedenen Möglichkeiten, dies zu erreichen.
Externe Bilder und lokale Bilder sind die beiden Arten von Bildern, die wir in unserer React-Anwendung verwenden möchten. Wir befassen uns in diesem Artikel hauptsächlich mit lokalen Bildern, da externe Bilder nicht von uns importiert werden müssen.
Externe Bilder sind Bilder, die bereits extern gehostet wurden und auf die jeder über eine URL zugreifen kann, während lokale Bilder Bilder sind, die uns nur auf unserem lokalen Computer oder Projektordner zur Verfügung stehen und die wir in unserer Anwendung verwenden möchten.
So zeigen Sie extern gehostete Bilder an
Bevor wir uns mit dem Importieren von Bildern befassen, ist es wichtig zu verstehen, dass anderswo gehostete Bilder auf die gleiche Weise funktionieren, wie wir immer Bilder in HTML verwendet haben – durch Hinzufügen der URL zur src Attribut des img tag:
const App = () => {
return (
<div>
<img src="https://reactjs.org/logo-og.png" alt="React Logo" />
</div>
);
};
Lassen Sie uns nun lernen, wie wir (lokale) Bilder mit React importieren können!
So importieren Sie Bilder mit React
Abgesehen von den externen Bildern unterscheidet sich die Art und Weise, wie Bilder in React verwendet werden, erheblich von der anderer Frameworks oder sogar HTML. Diese Bilder müssen zuerst in React importiert werden, bevor sie in unserer Anwendung verwendet werden können.
Dies kann auf zwei Arten erreicht werden: durch die Verwendung von import Anweisung oder durch Verwendung der require() Funktion. Wir werden beide Ansätze durchgehen.
So importieren Sie Bilder mit React Using the importieren Erklärung
Weil es einfacher zu lesen und zu verstehen ist, die import -Anweisung ist die am häufigsten verwendete Methode zum Importieren lokal gespeicherter Bilder in React. Die Bilder werden behandelt als Standardexporte, und wenn wir sie importieren, tun wir dies auf die gleiche Weise wie wir Komponenten importieren. Dies geschieht durch Angabe des relativen Pfads von der Datei zu dem Bild, das wir importieren:
import Logo from './images/react-logo.png';
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
Im obigen Code verwenden wir immer noch die img tag und src Attribut, aber dieses Mal die src -Attribut erhält eine Variable statt einer Zeichenfolge, die in JSX mit geschweiften Klammern übergeben wird.
Hinweis: Wir können beliebig viele Bilder importieren, aber jedes Bild muss in der import-Anweisung einen eindeutigen Namen haben, sonst wird ein Fehler ausgegeben.
Es ist wichtig zu verstehen, wie man relative Pfade für Dateien angibt und erhält; andernfalls können Bugs und Fehler auftreten. Im vorherigen Beispiel wurde das Bild in einem gespeichert /src/images.
So importieren Sie Bilder mit React mithilfe der require()-Funktion
Das require() function ist eine Node.js-Funktion, die verwendet wird, um externe Module aus anderen Dateien als der aktuellen Datei einzuschließen. Es funktioniert genauso wie die import Erklärung und erlaubt uns, Bilder einzufügen:
let Logo = require('./images/react-logo.png');
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
Der einzige Unterschied ist die erste Zeile, in der wir das Bild über seinen relativen Pfad angefordert und es dann in einer Variablen gespeichert haben, auf die wir in der zugegriffen haben img Tag über geschweifte Klammern.
Wir können uns auch dafür entscheiden, dies inline zu tun und die zusätzliche Zeile zu vermeiden, die verwendet wird, um das Bild einer Variablen zuzuweisen, da dies nicht obligatorisch ist:
const App = () => {
return (
<div>
<img src={require('./images/react-logo.png')} alt="React Logo" />
</div>
);
};
Zusammenfassung
Wir haben gelernt, wie man lokale Bilder mit der import Aussage und die require() Funktion in diesem Artikel.
