Wie kann ich ein Bild aus dem lokalen Verzeichnis laden und in das reactjs img src
Tag aufnehmen?
Ich habe ein Bild one.jpeg
im selben Ordner wie meine Komponente und habe beide <img src="one.jpeg" />
und <img src={"one.jpeg"} />
innerhalb meiner render
Funktion ausprobiert, aber das Bild wird nicht angezeigt. Außerdem habe ich keinen Zugriff auf die webpack config
Datei, da das Projekt mit der offiziellen create-react-app
Befehlszeile util erstellt wird.
Update: Dies funktioniert, wenn ich das Bild zum ersten Mal mit importiere import img from './one.jpeg'
und darin verwende img src={img}
, aber ich habe so viele Bilddateien zum Importieren und möchte sie daher im Formular verwenden img src={'image_name.jpeg'}
.
Antworten:
Wickeln Sie zuerst den src ein
{}
Wenn Sie dann Webpack verwenden; Anstatt:
<img src={"./logo.jpeg"} />
Möglicherweise müssen Sie Folgendes verwenden:
<img src={require('./logo.jpeg')} />
Eine andere Möglichkeit wäre, zuerst das Bild als solches zu importieren:
import logo from './logo.jpeg'; // with import
oder ...
const logo = require('./logo.jpeg); // with require
dann stecken Sie es ein ...
<img src={logo} />
Ich würde diese Option besonders empfehlen, wenn Sie die Bildquelle wiederverwenden.
quelle
.
am Anfang der relativen URL stehende nicht zu vergessen . Sollte sein<img src={require('./one.jpeg')} />
Am besten importieren Sie das Bild zuerst und verwenden es dann.
quelle
Sie müssen Ihren Bildquellenpfad darin einschließen
{}
Sie müssen verwenden,
require
wenn Sie verwendenwebpack
quelle
Innerhalb öffentlich ein Ordner erstellen Assets Ordner und legen Bildpfad entsprechend.
quelle
Der beste Weg zum Importieren von Bildern ist ...
quelle
Meine Antwort ist im Grunde der von Rubzen sehr ähnlich. Ich benutze das Bild übrigens als Objektwert. Zwei Versionen funktionieren für mich:
oder
Ohne Wrapper - aber das ist auch eine andere Anwendung.
Ich habe auch "Import" -Lösung überprüft und in einigen Fällen funktioniert es (was nicht überraschend ist, dass es in Muster App.js in React angewendet wird), aber nicht in dem Fall wie meinem oben.
quelle
quelle
Ich habe diesen Weg benutzt und er funktioniert ... Ich hoffe, Sie sind nützlich.
quelle
Standardbild exportieren
quelle
Wie einige in den Kommentaren erwähnt, können Sie die Bilder in den öffentlichen Ordner legen. Dies wird auch in den Dokumenten der Create-React-App erklärt: https://create-react-app.dev/docs/using-the-public-folder/
quelle
<img src={process.env.PUBLIC_URL + '/img/logo.png'} />
Ich habe einen anderen Weg gefunden, dies zu implementieren (dies ist eine funktionale Komponente):
Ich hoffe es hilft!
quelle
Sie haben zwei Möglichkeiten, dies zu tun.
Zuerst
Importieren Sie das Bild über die Klasse und verweisen Sie dann wie folgt auf Ihr
<img/>
ElementZweite
Sie können das Bild direkt Pfad angeben
require('../pathToImh/img')
in<img/>
wie dieses Elementquelle