Ich bin neu in ReactJS und möchte Bilder in eine Komponente importieren. Diese Bilder befinden sich im öffentlichen Ordner und ich weiß nicht, wie ich über die Reaktionskomponente auf den Ordner zugreifen soll.
Irgendwelche Ideen ?
BEARBEITEN
Ich möchte ein Bild in Bottom.js oder Header.js importieren
Der Strukturordner lautet:
Ich benutze kein Webpack. Sollte ich ?
Bearbeiten 2
Ich möchte das Webpack zum Laden der Bilder und der restlichen Assets verwenden. Also habe ich in meinem Konfigurationsordner die nächsten Dateien:
Wo und wie muss ich die Pfade der Bilder hinzufügen?
Vielen Dank
javascript
reactjs
Aceconhielo
quelle
quelle
src="/images/logofooter.png"
?Antworten:
Um Bilder in der Öffentlichkeit zu referenzieren, gibt es zwei Möglichkeiten, wie ich es direkt machen kann. Einer ist wie oben von Homam Bahrani.
mit
<img src={process.env.PUBLIC_URL + '/yourPathHere.jpg'} />
Und da dies funktioniert, brauchen Sie wirklich nichts anderes, aber das funktioniert auch ...
<img src={window.location.origin + '/yourPathHere.jpg'} />
quelle
Sie benötigen hierfür keine Webpack-Konfiguration.
Geben Sie in Ihrer Komponente einfach den Bildpfad an. Standardmäßig kennt reag sein im öffentlichen Verzeichnis.
<img src="/image.jpg" alt="image" />
quelle
Die Reaktionsdokumente erklären dies gut in der Dokumentation. Sie müssen sie
process.env.PUBLIC_URL
mit Bildern verwenden, die im öffentlichen Ordner abgelegt sind. Sehen Sie hier für weitere Informationenreturn <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
quelle
1- Es ist gut, wenn Sie Webpack für Konfigurationen verwenden, aber Sie können einfach den Bildpfad verwenden und reagieren, um herauszufinden, dass es sich in einem öffentlichen Verzeichnis befindet.
<img src="/image.jpg">
2- Wenn Sie ein Webpack verwenden möchten, das in React üblich ist. Sie können diese Regeln in Ihrer Datei webpack.config.dev.js verwenden.
module: { rules: [ { test: /\.(jpe?g|gif|png|svg)$/i, use: [ { loader: 'url-loader', options: { limit: 10000 } } ] } ], },
Anschließend können Sie eine Bilddatei in Reaktionskomponenten importieren und verwenden.
import image from '../../public/images/logofooter.png' <img src={image}/>
quelle
Wir wissen, dass React SPA ist. Alles wird aus der Stammkomponente gerendert, indem es von JSX auf das entsprechende HTML erweitert wird.
Es spielt also keine Rolle, wo Sie die Bilder verwenden möchten. Die beste Vorgehensweise besteht darin, einen absoluten Pfad zu verwenden (in Bezug auf die Öffentlichkeit). Mach dir keine Sorgen über relative Pfade.
In Ihrem Fall sollte dies überall funktionieren:
"./images/logofooter.png"
quelle
Sie sollten hier ein Webpack verwenden, um Ihr Leben einfacher zu machen. Fügen Sie die folgende Regel in Ihre Konfiguration ein:
const srcPath = path.join(__dirname, '..', 'publicfolder') const rules = [] const includePaths = [ srcPath ] // handle images rules.push({ test: /\.(png|gif|jpe?g|svg|ico)$/, include: includePaths, use: [{ loader: 'file-loader', options: { name: 'images/[name]-[hash].[ext]' } }
Danach können Sie die Bilder einfach in Ihre Reaktionskomponenten importieren:
import myImage from 'publicfolder/images/Image1.png'
Verwenden Sie myImage wie folgt:
<div><img src={myImage}/></div>
oder wenn das Bild in den lokalen Status der Komponente importiert wird
<div><img src={this.state.myImage}/></div>
quelle
Sie können dies auch verwenden. Es funktioniert unter der Annahme, dass sich 'yourimage.jpg' in Ihrem öffentlichen Ordner befindet.
<img src={'./yourimage.jpg'}/>
quelle