Struktur des IMG-Verzeichnisses react.js

Wie um alles in der Welt kann ich Bilder anzeigen lassen? 40 Minuten Reaschering und immer noch keine Freude. Ich denke, die wahre Antwort ist, wo ich Bilder hinstelle.Struktur des IMG-Verzeichnisses react.js

Struktur des Haupt dir

App.js 
public > index.js 
Views > 
     index.jsx 
     layouts > 
      footer.jsx 
      header.jsx 
      master.jsx

Überall dort, wo ich die Bilder gesetzt werden sie nicht angezeigt. Die Hauptdatei, die aufgerufen wird und den HTML-Code rendert, ist index.jsx im Ordner views.

Ich benutze Express, um den virtuellen Server und als Core-Engine zu erstellen.

Ich habe folgende in der Datei header.jsx

<img src='images/main_home_icon.png'/> 
<img src={require('images/main_home_icon.png')} />

Quelle

2016-04-19 Paddy

Die Verzeichnisstruktur nicht viel damit zu tun hat. Die URLs der Bilder und die URLs der Seiten werden durch Ihren Node.js-Code bestimmt. – Quentin

BINGO, wow, einfaches Zeug ist so komplex, SO um das Problem zu lösen, musste dies in Express "app.use (express.static ('./ public')) deklarieren;" – Paddy

"Einfaches Zeug" - Das Schreiben eines eigenen Webservers in JavaScript ist nicht das, was ich "einfach" nennen würde. – Quentin

Es hängt versucht. Wenn Sie das Formular <img src='images/main_home_icon.png'/> verwenden, ist Ihr Basispfad das öffentliche Verzeichnis. Normalerweise erstellt man ein bundle.js mit browserify oder webpack und legt die Javascript-Datei in ein Verzeichnis mit einer Indexdatei. In diesem Verzeichnis müssen Sie Ihre Bilder ablegen.

Auf der anderen Seite können Sie Ihre Bilder direkt in Ihren Javascript-Code mit <img src={require('images/main_home_icon.png')} /> einfügen. In diesem Fall ist Ihr Basispfad der Basispfad der jsx-Datei (in Ihrem Fall: Layout-Ordner). Ich würde Werbung für diese Methode, weil Sie z. In Ihrer Webpack-Konfiguration sollten die Bilder (abhängig von ihrer Größe) in Ihrer Bundle-Datei als Base64-String enthalten sein und nur mit ihrem relativen Pfad enthalten sein.

Weiterführende Literatur würde ich vorschlagen, einen Blick auf dieses „Kochbuch“ zu nehmen: https://github.com/christianalfoni/react-webpack-cookbook

Quelle

2016-04-19 08:22:40 CapCa

Ausgezeichnet, Vielen Dank für eine Ressource reich Website, es war wirklich frustrierend zu versuchen, mit den Grundlagen zu appretieren, es ist nicht nur die Syntax ist die gesamte Struktur oben Unterseite. Daumen hoch – Paddy

Struktur des IMG-Verzeichnisses react.js

Antwort

Verwandte Themen