2017-12-31 9 views
1

Für ein SET-Spiel, das ich in React (mit Create React App) erstelle, muss ich 81 Image-Dateien importieren, die die 81 möglichen Karten repräsentieren, die im Spiel verwendet werden. Mit Hilfe eines Python-Skript, habe ich diese extrem lange Liste der ImporteVermeiden einer langen Liste von Importen in React

import i0000 from './assets/0000.png' 
import i0001 from './assets/0001.png' 
[...] 
import i2221 from './assets/2221.png' 
import i2222 from './assets/2222.png' 

und da ich diese Variablen mit Strings verweisen müssen, um jede Karte darstellt, habe ich dieses Objekt:

const refs = { 
    '0000': i0000, 
    '0001': i0001, 
    [...] 
    '2220': i2220, 
    '2221': i2221, 
    '2222': i2222 
}; 

die gute Sache ist, dass ich habe jetzt alle Kartenbilder mit vorinstalliertem

<img src={refs[card]} /> 

leicht aufgerufen werden, aber das Schlimme ist, ich 164 Zeilen lächerlich Code haben, es funktioniert. Ich frage mich, ob es einen besseren Weg gibt, ein Verzeichnis voller Bilder vorab zu cachen und zu referenzieren.

+0

Würden Sie so etwas verwenden können? Sie verwenden eine Funktion von Webpack, um alle Bilder aus einem Verzeichnis zu importieren. https://stackoverflow.com/a/42118921/9104680 –

+0

Hop hilft https://stackoverflow.com/questions/48560592/is-it-possible-to-import-a-group-of-images-as-an -array-create-react-app-projec/48561549 # 48561549 – Jayavel

Antwort

0

Verschieben Sie alle Bilder in Ihren Ordner public, sagen Sie public/cards.

Dann können Sie sie mit <img src={`cards/${card}.png`} /> ohne die Notwendigkeit einer import Anweisung referenzieren.

Webpack kann Sie nicht mehr warnen, wenn die referenzierten Bilder fehlen, stellen Sie also sicher, dass sie vorhanden sind.

+0

Bedeutet das nicht, dass die Bilder nicht im Cache gespeichert werden? – wbruntra

+0

'webpack' bündelt importierte Bilder einfach in 'public/static/media' (Standard). Im generierten HTML-Code werden die Bilder wie oben beschrieben referenziert (mit Ausnahme von verschiedenen Verzeichnissen und Dateinamen). Sie können dies beobachten, indem Sie auf die Registerkarte "Netzwerk" Ihres Browsers gehen und Ihre Seite aktualisieren. – riwu

+0

Ich glaube nicht, dass die Standard-App "Create React App" dies tut (zumindest wenn wir über den gleichen öffentlichen Ordner sprechen, der 'index.html' enthält), obwohl ich meinen Standpunkt, dass das Einrichten von Webpack zum Verarbeiten der Dateien wäre ein guter Weg, um das Problem zu lösen, das ich oben habe. – wbruntra

0

zwei Ansätze:

Zuerst beseitigen Sie manuell die Refs Objekt erstellen, indem der Code wie folgt struturing:

export i0000 from './assets/0000.png' 
export i0001 from './assets/0001.png' 

und wo Sie wollen, diese Vermögenswerte nutzen:

imports * as refs from './assets' 
<img src={refs[card]} /> 

Zweitens könnten Sie ein Bündelungssystem verwenden, das dynamische Anforderungen unterstützt, z https://webpack.github.io/docs/context.html#dynamic-requires

+0

Auf Ihrem ersten Punkt, bin ich durch das refs Objekt stolpern, weil zu der Zeit, die ich versuche, das Bild zu rendern, alles, auf das ich zugreifen kann, eine Schnur ist, die die Karte darstellt. Der Export ist also eine Variable mit dem Namen "i0000", aber die Karte ist "0000". Wie kann ich die beiden in Beziehung setzen? – wbruntra

+0

Wie folgt: '' – gunn

Verwandte Themen