Webpack - Erfordern Bilder mit Datei-Loader

Question

Ich verwende Webpack für meine React App.

Ich habe 'File-Loader' & 'Url-Loader' in meiner Webpack-Konfiguration installiert.

Allerdings bin ich nicht sicher, wie Sie Bilder mit meinen Komponenten verknüpfen. Ich halte das 'src' für das Bild in einer 'Data.js' Datei, von wo ich die Daten für das Bild an die react-Komponente übergebe. Mein webpack.config.js

:

... 
const PATHS = { 
    app : path.join(__dirname, "app"), 
    build : path.join(__dirname, "build") 
}; 

const common = { 
    entry : { 
     app : PATHS.app 
    }, 
    output : { 
     path : PATHS.build, 
     filename : "bundle.js" 
    }, 
    module : { 
     preLoaders : [ 
... 
     loaders : [ 
      { 
       test : /\.css$/, 
       loaders : [ "style", "css" ], 
       include : PATHS.app 
      }, 
      { 
       test : /\.jsx?$/, 
       loader : "babel", 
       query : { 
        cacheDirectory : true, 
        presets : [ "react", "es2015" ] 
       }, 
       include : PATHS.app 
      }, 
      { 
       test : /\.(jpg|png)$/, 
       loader : "file-loader?name=[name].[ext]", 
       include : PATHS.app 
      } 
... 

Im Präsentationskomponente reagieren meine, Im einfach require mit dem Bild abzurufen:

const PreviewTemImgParent = ({ data }) => { 
    let img = require(data.get("src")); 
    return(
     <div className = "card previewImgParent"> 
      <img 
      src = { img } 
    ... 

Die data.js Datei hat absolute Pfade (Haupt App-Ordner) für jedes Bild (ich hier falsch gehen kann):

export const previewTemImgData = Map({ 
    body : List.of(
     Map({ // using immutable.js 
      src : "app/css/asset/template/png/body/GatheredAtEmpireLine.png", 
      alt : "image", 
      className : "flipParent", 
... 

globale Direkt ory Bild für das, was ihren Wert:

Ich frage mich, wo ich die Fehler machte und wie diese zu lösen?

EDIT: Nach der Lektüre um, ich herausfinden, dass webpack Referenz für die relative Position des Bildes benötigt, so habe ich webpack.config.js geändert folgenden:

... 
output : { 
    path : PATHS.build, 
    publicPath : "/", 
    filename : "bundle.js" 
} 
... 

jedoch das tut das Problem lösen. Anleitung würde sehr geschätzt werden.

Answer 1

Vorschläge zu verwenden:

1.Verwenden url-loader für Bilder.
Durch Angabe der limit in Ihrer Webpack-Konfiguration, z. B. url-loader?limit=8000, wenn die Datei kleiner als 8000 Byte ist. Die url-loader funktioniert als file-loader. Betten Sie die Dateien in die Bundle-Ausgabe für den Haupteintrag ein. Wenn nicht, siehe Punkt 2.

2.Use URL (Adresse) in css/SCSS für Bilder
Hier ist ein Beispiel, das durch Webpack und URL-loader mit Strom versorgt wird:
background: url('../images/heroBanner.png') no-repeat center center fixed;

Und weil die Datei groß genug ist, transformiert webpack die Datei genau wie andere Bundles in das Ausgabeverzeichnis.Es wird eine HTTP-Anforderung für dieses Bild gesendet, wenn die Webseite geladen wird.

https://github.com/EcutDavid/EcutDavid.github.io/blob/8346f18dccdae18c4d6e98eb9b8cc51d62338cb5/src/styles/Header.scss#L2

Answer 2

Das Webpack unterstützt jetzt keine asynchrone Ressource, dh wenn Sie ein Bild benötigen, sollten Sie einfach den Pfad des Bildes dorthin senden. wie diese Art und Weise:

let img = new Image(); 
img.src = require('./images/1.jpg'); 

die URL der Bild cann't eine Variable sein, denn wenn webpack Code bündeln, ist es nicht Ihr Code ausführen, so dass es cann't den Wert Ihrer variabel sein wissen .

Wenn Sie wirklich asynchron benötigen. Sie können versuchen, require.ensure