ReactJS und Bilder im öffentlichen Ordner

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

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'} />

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" />

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'} />;

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}/>

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"

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> 

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

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