ReactJS und Bilder im öffentlichen Ordner

94

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:

Geben Sie hier die Bildbeschreibung ein

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:

Geben Sie hier die Bildbeschreibung ein

Wo und wie muss ich die Pfade der Bilder hinzufügen?

Vielen Dank

Aceconhielo
quelle
1
Dieser Ordner ist öffentlich für was? Wie ist Ihre Projektstruktur? Bündeln Sie Bilder auch mit Webpack oder ist dies ausgeschlossen? etc etc etc Kontext Kontext
Joel Harkes
@ JoelHarkes bearbeitet.
Aceconhielo
scheint es ist nicht gepackt. hast du versucht : src="/images/logofooter.png"?
Joel Harkes
Entschuldigung, das ist für die Frage nicht relevant, aber welches Symbolthema verwenden Sie?
Nermin

Antworten:

77

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'} />
Gerard
quelle
1
Es wird kein Fehler in der Konsole angezeigt, aber das Bild wird als Standardbildsymbol angezeigt, nicht das, was ich importiert habe. Ich habe beide von Ihnen erwähnten Fälle ausprobiert. Bitte hilf mir. Vielen Dank !
Prakhar Mittal
148

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" />
Bimal Grg
quelle
2
Das hat bei mir funktioniert. Nur ich habe Bilder in ein öffentliches Verzeichnis kopiert. React hat den Pfad automatisch aufgelöst.
Vineeth Bhaskaran
2
Und wenn sich die Bilder in einem Ordner innerhalb des öffentlichen Ordners befinden, wissen Sie dann, ob Sie sie finden können?
Yuval Levy
2
Ja @YuvalLevy.
Oliver Voutat
10

Die Reaktionsdokumente erklären dies gut in der Dokumentation. Sie müssen sie process.env.PUBLIC_URLmit Bildern verwenden, die im öffentlichen Ordner abgelegt sind. Sehen Sie hier für weitere Informationen

return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
Homam Bahrani
quelle
Ja, für dynamische Bilder außerhalb der src-Verzeichnishierarchie. Statische wie ein Logo oder ein Hintergrund können mit der Importmethode erreicht werden.
Juan Lanus
1
Dies gilt auch für Apps, die mit create
reag
1
Es wird kein Fehler in der Konsole angezeigt, aber das Bild wird als Standardbildsymbol angezeigt, nicht das, was ich importiert habe. Bitte hilf mir.
Prakhar Mittal
4

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}/>
Hassan Ajaz
quelle
2

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"

Karthik Sagar
quelle
1

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> 
Umesh
quelle
Ich bezweifle, dass Sie ein Webpack benötigen, um eine Ressource importieren zu können.
Siya
@fshock, ich sagte, es wird es einfacher machen, die Aufgabe zu erfüllen.
Umesh
@Umesh Ich mache es lieber mit Webpack. Sie sagten also, dass ich die Regel in die Konfiguration einfügen muss, aber welche Datei? Ich habe path.js, polyfills.js, webpack.config.dev.js, webpack.config.prod.js und webpackDevServer.config.js. Ich werde die Frage bearbeiten, damit Sie alle die Struktur sehen können. Vielen Dank
Aceconhielo
@Aceconhielo, sollten Sie es in webpack.config.dev.js und webpack.config.prod.js
Umesh
0

Sie können dies auch verwenden. Es funktioniert unter der Annahme, dass sich 'yourimage.jpg' in Ihrem öffentlichen Ordner befindet.

<img src={'./yourimage.jpg'}/>
glattVibes
quelle