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.
javascript
reactjs
webpack
onedkr
quelle
quelle
require
. Lesen Sie diese Antwort auf SO für weitere Informationen.Antworten:
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" />
quelle
/
Vorhergehende hervorhebendetails
(vs./details
usw. für andere, die die beiden möglicherweise miteinander verbinden).reactjs
mitcordova
undES5
als Eslint/images/popcorn.png
und nicht./images/popcorn.png
. Arbeitete für mich mit allen Routen und Sachen.In
create-react-app
relativen Pfaden scheinen Bilder nicht zu funktionieren. Stattdessen können Sie ein Bild importieren:quelle
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.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
image
Ordner im öffentlichen Ordner hinzufügen .<img src="/images/logo.png" />
quelle
www.example.com/react-app
bereitstellen, wird der öffentliche Ordner auf www.example.com ohne angezeigtreact-app
. Dies kann problematisch sein, daher ist die akzeptierte Antwort die richtige. Quellen: Hinzufügen von Assets und Verwenden des öffentlichen OrdnersMit
create-react-app
gibt 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:quelle
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" />
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.
quelle
In meinem Fall funktioniert auch der folgende Code.
quelle
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:
In JavaScript:
Erstellen Sie ein dynamisches Bild für ein neues Bild:
Setzen Sie das Bild dynamisch auf das vorhandene Bild mit der ID 'img1':
Wenn sich das Bild im Verzeichnis 'src' befindet:
Beispiel:
\src\logo.svg
In JavaScript:
In jsx:
quelle
Hinzufügen von file-loader npm zu webpack.config.js gemäß der offiziellen Verwendungsanweisung wie folgt:
arbeitete für mich.
quelle
Importieren Sie Bilder in Ihre Komponente
Rufen Sie den Bildnamen für das Bild src = {RecentProjectImage_3} als Objekt auf
quelle
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".
quelle
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%:
Die Verwendung von% PUBLIC_URL% in der obigen Beschreibung wird
public
während des Builds durch die URL des Ordners ersetzt. Nur Dateien innerhalb derpublic
Aus 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
.quelle