Webpack - Wymagaj obrazów przy użyciu programu ładującego pliki

Question

Używam pakietu Webpack do mojej aplikacji React.

zainstalowałem 'file-loader' & 'url-ładowarka' w moim WebPACK config.

Jednak nie jestem pewien, w jaki sposób połączyć zdjęcia do moich komponentów. Trzymam "src" dla obrazu w pliku "Data.js", skąd przekazuję dane obrazu do komponentu reagującego.

Moi 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 moich reagować składnik prezentacji, jestem po prostu za pomocą require aby pobrać obraz:

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

Plik Data.js ma ścieżki bezwzględne (główne folder aplikacji) dla każdego obrazu (może być źle tutaj):

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 ory obraz co jej wartości:

Zastanawiam się, gdzie robię błędy i jak rozwiązać ten problem?

EDIT: Po zapoznaniu się, że postać, która WebPack potrzebuje odniesienia dla względnego położenia obrazu, więc mam zmieniony webpack.config.js do następujących:

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

jednak, że nie robi Rozwiąż problem. Wytyczne byłyby bardzo doceniane.

Answer 1

Sugestie:

1.Wykorzystanie url-loader dla obrazów.
Określając limit w konfiguracji WebPACK, takich jak: url-loader?limit=8000, jeśli plik jest mniejszy niż 8000 bajtów. url-loader działa jako file-loader. Osadź pliki na wyjściu pakunku dla głównego wpisu. Jeśli nie, patrz punkt 2.

2.Wykorzystanie URL (adres) w css/SCSS dla obrazów ruchu
Oto przykład, który jest zasilany przez Webpack i URL-ładowarka:
background: url('../images/heroBanner.png') no-repeat center center fixed;

A ponieważ plik jest wystarczająco duży, pakiet WWW przekształca plik tak, jak inne pakiety do katalogu wyjściowego.Wyśle żądanie HTTP dla tego obrazu podczas ładowania strony internetowej.

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

Answer 2

WebPack nie obsługuje asynchroniczną zasób teraz, to znaczy, jeśli chcesz, aby obraz, należy po prostu wysłać ścieżkę obrazu do niego. podobnie jak w ten sposób:

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

URL obrazu cann't być zmienna, ponieważ podczas WebPack pakiet kodu, to nie można uruchomić kod, więc cann't być poznać wartość zmiennej .

jeśli naprawdę chcesz wymagać asynchronicznie. można spróbować użyć require.ensure