Ich habe ein Problem mit meinen Bildern in meinem Reaktionsprojekt. In der Tat habe ich immer gedacht, dass der relative Pfad zum src-Attribut auf der Dateiarchitektur basiert

Hier meine Dateiarchitektur:

components
    file1.jsx
    file2.jsx
    file3.jsx
container
img
js 
... 

Mir wurde jedoch klar, dass der Pfad auf der URL basiert. In einer meiner Komponenten (zum Beispiel in file1.jsx) habe ich Folgendes:

localhost/details/2
<img src="../img/myImage.png" /> -> works

localhost/details/2/id
<img src="../img/myImage.png" /> -> doesn't work, images are not displayed

Wie ist es möglich, dieses Problem zu lösen? Ich möchte, dass in jeder Form von Routen, die vom React-Router verarbeitet werden, alle Bilder mit demselben Pfad angezeigt werden können.

Sie verwenden eine relative URL, die relativ zur aktuellen URL ist, nicht zum Dateisystem. Sie können dies mithilfe absoluter URLs beheben

<img src ="http://localhost:3000/details/img/myImage.png" />

Dies eignet sich jedoch nicht für die Bereitstellung auf www.my-domain.bike oder einer anderen Site. Besser wäre es, eine URL relativ zum Stammverzeichnis der Site zu verwenden

<img src="/details/img/myImage.png" />

In create-react-apprelativen Pfaden scheinen Bilder nicht zu funktionieren. Stattdessen können Sie ein Bild importieren:

import logo from './logo.png' // relative path to image 

class Nav extends Component { 
    render() { 
        return ( 
            <img src={logo} alt={"logo"}/> 
        )  
    }
}

Wenn Sie zum Erstellen Ihres Projekts die App "create-react-app" verwendet haben, können Sie auf Ihren öffentlichen Ordner zugreifen. Sie müssen also Ihren imageOrdner im öffentlichen Ordner hinzufügen .

public / images /

<img src="/images/logo.png" />

Mit create-react-appgibt es einen öffentlichen Ordner (mit index.html ...). Wenn Sie Ihre „myImage.png“ setzen dort, sagen unter img Unterordner, dann können Sie auf sie zugreifen durch:

<img src={window.location.origin + '/img/myImage.png'} />

1. Erstellen Sie einen Bilderordner in src (/ src / images) und behalten Sie Ihr Bild darin. Importieren Sie dann dieses Bild in Ihre Komponente (verwenden Sie Ihren relativen Pfad). Wie unten-

   import imageSrc from './images/image-name.jpg';

   Und dann in Ihrer Komponente.

   <img title="my-img" src={imageSrc} alt="my-img" />

2. Eine andere Möglichkeit besteht darin, Bilder im öffentlichen Ordner zu speichern und sie unter Verwendung des relativen Pfads zu importieren. Erstellen Sie dazu einen Bildordner im öffentlichen Ordner und behalten Sie Ihr Bild darin. Und dann in Ihrer Komponente verwenden Sie es wie unten.

   <img title="my-img" src='/images/my-image.jpg' alt="my-img" />

   Beide Methoden funktionieren, aber die erste wird empfohlen, da die saubere Art und die Bilder während der Erstellungszeit vom Webpack verarbeitet werden.

In meinem Fall funktioniert auch der folgende Code.

<img src={require('../logo.png')} alt="logo" className="brand-logo"/>

Einige ältere Antworten funktionieren nicht, andere sind gut, erklären das Thema jedoch nicht zusammenfassend:

Wenn sich das Bild im 'öffentlichen' Verzeichnis befindet

Beispiel: \public\charts\a.png

In HTML:

<img id="imglogo" src="/charts/logo.svg" />

In JavaScript:

Erstellen Sie ein dynamisches Bild für ein neues Bild:

var img1 = document.createElement("img");  
img1.src = 'charts/a.png';  

Setzen Sie das Bild dynamisch auf das vorhandene Bild mit der ID 'img1':

document.getElementById('img1').src = 'charts/a.png';

Wenn sich das Bild im Verzeichnis 'src' befindet:

Beispiel: \src\logo.svg

In JavaScript:

import logo from './logo.svg';  
img1.src = logo;  

In jsx:

<img src={logo} /> 

Hinzufügen von file-loader npm zu webpack.config.js gemäß der offiziellen Verwendungsanweisung wie folgt:

config.module.rules.push(
    {
        test: /\.(png|jpg|gif)$/,
        use: [
            {
                loader: 'file-loader',
                options: {}
            }
        ]
    }
);

arbeitete für mich.

Importieren Sie Bilder in Ihre Komponente

import RecentProjectImage_3 from '../../asset/image/recent-projects/latest_news_3.jpg'

Rufen Sie den Bildnamen für das Bild src = {RecentProjectImage_3} als Objekt auf

 <Img src={RecentProjectImage_3} alt="" />

Ein Freund zeigte mir, wie das geht:

"./" funktioniert, wenn sich die Datei, die das Bild anfordert (z. B. "example.js"), innerhalb der Ordnerbaumstruktur auf derselben Ebene befindet wie der Ordner "images".

Platzieren Sie das Logo in Ihrem öffentlichen Ordner unter z. B. public / img / logo.png und verweisen Sie dann auf den öffentlichen Ordner als% PUBLIC_URL%:

<img src="%PUBLIC_URL%/img/logo.png"/>

Die Verwendung von% PUBLIC_URL% in der obigen Beschreibung wird publicwährend des Builds durch die URL des Ordners ersetzt. Nur Dateien innerhalb derpublicAus dem HTML-Code kann Ordner verwiesen werden.

Im Gegensatz zu "/img/logo.png" oder "logo.png" funktioniert "% PUBLIC_URL% / img / logo.png" sowohl beim clientseitigen Routing als auch bei einer öffentlichen URL ohne Rootberechtigung ordnungsgemäß. Erfahren Sie, wie Sie eine öffentliche URL ohne Root durch Ausführen konfigurieren npm run build.