wake-up-neo.com

Richtiger Pfad für img auf React.js

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

Hier meine Aktenarchitektur:

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

Allerdings habe ich festgestellt, dass der Pfad auf der URL aufgebaut ist. 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.

89
onedkr

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

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

Aber das ist nicht gut für die Bereitstellung auf www.my-domain.bike oder einer anderen Website. Besser wäre es, eine URL relativ zum Stammverzeichnis der Site zu verwenden

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

61
prekolna

Ich versuche nicht, die Frage zu beantworten - nur eine Anmerkung, dass in der Erstell-Reaktions-App relative Pfade für Bilder nicht zu funktionieren scheinen. 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"}/> 
        )  
    }
}
263
claireablani

Wenn Sie Ihr Projekt mit create-react-app erstellt haben, können Sie auf Ihren öffentlichen Ordner zugreifen. Sie müssen also Ihren image -Ordner im öffentlichen Ordner hinzufügen.

öffentlich/bilder /

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

69
Rubel hasan

Mit create-react-app gibt es public Ordner (mit index.html ...). Wenn Sie dort Ihre "myImage.png" ablegen, sagen wir unter img Unterordner, dann können Sie darauf zugreifen über:

<img src={window.location.Origin + '/img/myImage.png'} />
37
Dima Gershman

in meinem Fall funktioniert der folgende Code auch.

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

Ich würde empfehlen, den traditionellen relativen Pfad zu verwenden. Sie können wie folgt im Bild verwenden. Wir können alles in diesen public Ordner legen und diesen Ordner als Ziel für den Zugriff auf images, videos usw. festlegen. Bewahren Sie dazu Ihre Bilder im öffentlichen Ordner auf. Wie so ...

enter image description here

Und dann in deinem jsx.

<img src="images/pitbull-mark.png" />
20
Asif J

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

Wenn sich das Bild im öffentlichen Verzeichnis befindet

Beispiel: \public\charts\a.png

In JavaScript:

Bild dynamisch zu neuem Bild erstellen:

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

Setze das Bild dynamisch auf das existierende 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 Gebrauchsanweisung wie folgt:

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

arbeitete für mich.

3
Treefish Zhang

Ein Freund hat mir gezeigt, wie das geht:

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

1
AdamJSim

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

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

Die oben angegebene Verwendung von% PUBLIC_URL% wird während des Builds durch die URL des Ordners public ersetzt. Aus dem HTML-Code kann nur auf Dateien im Ordner public verwiesen werden.

Im Gegensatz zu "/img/logo.png" oder "logo.png" funktioniert "% PUBLIC_URL%/img/logo.png" sowohl mit clientseitigem Routing als auch mit einer nicht als Root ausgeführten öffentlichen URL ordnungsgemäß. Erfahren Sie, wie Sie eine öffentliche Nicht-Root-URL konfigurieren, indem Sie npm run build ausführen.

0
Sami Start