Richtiger Pfad für img auf React.js

135

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.

onedkr
quelle
1
Zeigen Sie
4
Sie müssen verwenden require. Lesen Sie diese Antwort auf SO für weitere Informationen.
Heute
Hoffe, diese Antwort hilft dir. Reagiere auf lokale Bilder
mokesh moha

Antworten:

73

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

prekolna
quelle
1
Vielen Dank, ich möchte das /Vorhergehende hervorheben details(vs ./detailsusw. für andere, die die beiden möglicherweise miteinander verbinden).
user1322092
1
Auch für mich funktioniert es nicht. Ich benutze reactjsmit cordovaund ES5als Eslint
Jimit Patel
Während sowohl diese als auch die Lösung von claireablani funktionieren, empfehlen die Dokumente von createea-react-app claireablani. Sie listen eine Reihe von Vorteilen gegenüber der Veröffentlichung der Ressourcen auf facebook.github.io/create-react-app/docs/…
Athir Nuaimi am
@ user1322092 ist richtig. Denken Sie daran, es ist /images/popcorn.pngund nicht ./images/popcorn.png. Arbeitete für mich mit allen Routen und Sachen.
Nuhman
335

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"}/> 
        )  
    }
}
claireablani
quelle
14
Was ist mit dynamischen Bildern, auf die beispielsweise in einer JSON-Datei in der Create-React-App verwiesen wird?
Zok
2
@zok Ich denke, Sie würden die Variable aus der JSON-Datei exportieren und die Variable in Ihre Komponente importieren. Dann können Sie wie gewohnt darauf verweisen. zB exportiere const my_src = variable_here, importiere {my_src} aus my_file und src = {my_src}.
Claireablani
1
import './styles/style.less'; **import logo from './styles/images/deadline.png';**Ich erhalte eine Fehlermeldung, dass das Modul der 2. Zeile nicht gefunden wurde, solange das Bild vorhanden ist und der Pfad korrekt ist.
Hitendra
Diese Methode wird auch von Surviv.js bestätigt, wenn Sie sich eine der Methoden des Kernautoren des Webpacks ansehen möchten. Er erwähnt auch, dass Sie babel-plugin-transform-react-jsx-img-import verwenden können , um zu umgehen , dass Sie das Bild jedes Mal importieren müssen, wenn Sie auf ein Bild verweisen.
Andre
2
Nicht dies, es löst nur das
Sami
130

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

Rubel hasan
quelle
Ich wollte gerade eine Frage stellen, aber DIESE Antwort hat mein Problem gelöst !!! Sollte als Antwort markiert werden. Vielen Dank!!! +1
Si8
Es hat bei mir funktioniert. Denken Sie daran, dass Sie die App neu starten müssen, wenn Sie dem öffentlichen Verzeichnis ein neues Image hinzugefügt haben.
Awasik
Es ist in der Tat eine schnelle Möglichkeit, die Situationen zu behandeln, aber es funktioniert nur, wenn Sie keine relativen URLs benötigen. Wenn Sie beispielsweise Ihre App unter www.example.com/react-appbereitstellen, wird der öffentliche Ordner auf www.example.com ohne angezeigt react-app. Dies kann problematisch sein, daher ist die akzeptierte Antwort die richtige. Quellen: Hinzufügen von Assets und Verwenden des öffentlichen Ordners
Alexandru Pirvu
44

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'} />
Dima Gershman
quelle
4
Dies sollte als die richtige Antwort markiert werden, da es tatsächlich eine Lösung für alle Arten von Pfaden von Dateien ist
Sami
Ich verstehe nicht, warum Sie denken, dass dies die richtige Antwort ist. Ich habe gerade diese Antwort ausprobiert und Claireblanis Antwort und Claires Antwort haben funktioniert, während dies nicht der Fall war. Diese Antwort funktioniert nur, wenn sich das Bild im öffentlichen Ordner befindet. Sollten meine Bilder in den öffentlichen Ordner verschoben werden? @ Sami
Maderas
Ja, @Maderas erstes ist, dass diese Antwort dieselbe ist wie die akzeptierte => nur {} und Basis-URL entfernen. Sie können einfach src = '/ relativer Pfad des Bildes' oder src = 'absoluter Pfad des Bildes' verwenden Die Antwort ist, dass es einen variablen Pfad für jedes Bild enthält
Sami,
Bisher funktioniert für mich wie ein Zauber. Sonst nichts! Und ich habe so ziemlich alles versucht. Vielen Dank!
Maria Campbell
32
  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.

Mustkeem K.
quelle
2
das hat mir geholfen :)
Raphael
Dies funktioniert nicht, ein Schrägstrich (/) ist am Anfang erforderlich, um den relativen Pfad anzugeben, wie folgt: "/images/pitbull-mark.png"
Jeremy Rea
Haben Sie den in der Antwort genannten versucht? Das sollte auch funktionieren.
Mustkeem K
26

In meinem Fall funktioniert auch der folgende Code.

<img src={require('../logo.png')} alt="logo" className="brand-logo"/>
Sodhi Saab
quelle
1
Das hat bei mir funktioniert. Dies funktioniert für den Fall, dass Sie keine Bilder in einem öffentlichen Ordner speichern möchten
Mr_LinDowsMac
13

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} /> 
Manohar Reddy Poreddy
quelle
3

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.

Baumfisch Zhang
quelle
3

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="" />
Md. Rana
quelle
2

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

AdamJSim
quelle
1

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.

Sami Start
quelle