Webpack - Richiedi immagini usando il caricatore di file

Question

Sto usando Webpack per la mia app React.

Ho installato "File-loader" & "Url-loader" nella mia configurazione del webpack.

Tuttavia, non sono sicuro di come collegare le immagini ai miei componenti. Sto tenendo il 'src' per l'immagine in un file 'Data.js' da dove ho passato i dati per l'immagine al componente di reazione.

miei 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 la mia reagire componente presentazione, Im semplicemente utilizzando require per recuperare l'immagine:

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

Il file Data.js ha percorsi assoluti (principali cartella app) per ogni immagine (potrei sbagliare qui):

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

Global direct immagine ORY per quello che il suo valore:

mi chiedo dove sto facendo gli errori e come risolvere questo?

EDIT: Dopo aver letto intorno, immagino che webpack bisogno riferimento per la posizione relativa dell'immagine, così ho modificato webpack.config.js al seguente:

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

Tuttavia, quello non risolvere il problema. La guida sarebbe molto apprezzata.

Answer 1

Suggerimenti:

1.Utilizzare url-loader per le immagini.
Specificando limit nella configurazione del Webpack, ad esempio: url-loader?limit=8000, se il file è inferiore a 8000 byte. le opere url-loader sembrano come file-loader. Incorporare i file all'output del bundle per la voce principale. Altrimenti, vedi punto 2.

2.Usate URL (indirizzo) in css/SCSS per utilizzare immagini
Ecco un esempio che è alimentato da Webpack e URL-loader:
background: url('../images/heroBanner.png') no-repeat center center fixed;

E poiché il file è abbastanza grande, webpack trasforma il file proprio come altri bundle nella directory di output.Invia una richiesta HTTP per questa immagine quando la pagina web si sta caricando.

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

Answer 2

webpack non supporta la risorsa asincrona ora, significa che se si desidera richiedere l'immagine, è sufficiente inviare il percorso dell'immagine ad esso. proprio come in questo modo:

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

l'url dell'immagine cann't essere una variabile, perché quando webpack impacchettare il codice, non viene eseguito il codice, in modo che cann't essere conosce il valore della variabile .

se si desidera realmente richiedere in modo asincrono. si può provare a utilizzare require.ensure