Hier ist mein aktueller Workflow zum Importieren von Bildern und Symbolen in Webpack über ES6:
import cat from './images/cat1.jpg'
import cat2 from './images/cat2.svg'
import doggy from './images/doggy.png'
import turtle from './images/turtle.png'
<img src={doggy} />
Das wird schnell chaotisch. Folgendes möchte ich:
import * from './images'
<img src={doggy} />
<img src={turtle} />
Ich denke, es muss eine Möglichkeit geben, alle Dateien aus einem bestimmten Verzeichnis als Name ohne Erweiterung dynamisch zu importieren und diese Dateien dann nach Bedarf zu verwenden.
Hat jemand dies gesehen oder hat er sich Gedanken darüber gemacht, wie er am besten vorgehen kann?
AKTUALISIEREN:
Mit der ausgewählten Antwort konnte ich Folgendes tun:
function importAll(r) {
let images = {};
r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
return images;
}
const images = importAll(require.context('./images', false, /\.(png|jpe?g|svg)$/));
<img src={images['doggy.png']} />
reactjs
webpack
ecmascript-6
klinore
quelle
quelle
.map
Art einen Rückgabewert erwartet. In Ihrem Fall würde manforEach
stattdessen eine gute alte verwenden.r.keys.().map(...)
direkt zurück ...Antworten:
Nicht in ES6. Der springende Punkt von
import
undexport
ist, dass Abhängigkeiten statisch bestimmt werden können , dh ohne Code auszuführen.Aber da Sie Webpack verwenden, schauen Sie sich das an
require.context
. Sie sollten in der Lage sein, Folgendes zu tun:quelle
cra
importAll
nichts zurückgegeben.Es ist einfach. Sie können
require
(eine statische Methode, Import ist nur für dynamische Dateien) innerhalb der verwendenrender
. Wie das folgende Beispiel:quelle
Ich habe ein Verzeichnis von PNG-Länderflaggen mit den Namen au.png, nl.png usw. Also habe ich:
index.js
Ich habe eine Datei wie diese gelesen:
CountryFlagByCode.js
quelle
UPDATE Es scheint, als hätte ich die Frage nicht ganz verstanden. @ Felix hat es richtig gemacht, also überprüfe seine Antwort. Der folgende Code funktioniert nur in einer Nodejs-Umgebung.
Fügen Sie
index.js
demimages
Ordner eine Datei hinzuAuf diese Weise können Sie alles aus einer anderen Datei importieren und Wepback analysiert es und lädt die erforderlichen Dateien.
quelle
Ein funktionaler Ansatz zur Lösung dieses Problems:
quelle