javascript - Webpack - Képek betöltése a File-Loader használatával

Webpacket használok a React alkalmazásomhoz.

Telepítettem a 'File-loader'-t és az 'Url-loader'-t a webpack konfigurációmba.

Azonban nem vagyok biztos abban, hogyan kapcsolhatom az képeket a komponenseimhez. A kép 'src'-ét egy 'Data.js' fájlban tárolom, ahonnan átadom az adatot a képnek a React komponensnek.

A webpack.config.js fájlom:

...
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
            }
...

A React prezentációs komponensemben egyszerűen a require-et használom a kép lekéréséhez:

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

A Data.js fájl abszolút elérési utakat tartalmaz (a fő alkalmazás mappájához) minden képhez (lehet, hogy itt tévedek):

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

Globális könyvtárképfájl, amennyit ér:

Kíváncsi vagyok, hol követem el a hibákat, és hogyan lehetne ezeket megoldani?

SZERKESZTÉS : Miután körülnéztem, rájöttem, hogy a webpacknek hivatkozásra van szüksége a kép relatív pozíciójához, ezért módosítottam a webpack.config.js fájlt a következőre:

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

Azonban ez nem oldja meg a problémát. A vezetés nagyon jól jönne.

Válasz #1

A webpack most nem támogat aszinkron erőforrásokat, ami azt jelenti, hogy ha képet akarsz betölteni, akkor csak a kép elérési útját kell neki elküldened. Pontosan így:

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

A kép URL-je nem lehet változó, mert amikor a webpack csomagolja a kódodat, nem futtatja a kódodat, így nem lehet tudni a változó értékét.

ha valóban aszinkron módon szeretnél require-t használni, megpróbálhatod a require.ensure-t

Válasz #2

Javaslatok :

1. Használja a url-loader-t a képekhez.
A webpack konfigurációjában a limit megadásával, például: url-loader?limit=8000, ha a fájl kisebb, mint 8000 byte, a url-loader a file-loader-hez hasonlóan működik. A fájlokat a fő belépési pont kimenetébe ágyazza. Ha nem, lásd a 2. pontot.

2. Használja a url(cím) formátumot a css/scss-ben a képek használatához
Íme egy példa, amelyet a Webpack és a url-loader működtet:
background: url('../images/heroBanner.png') no-repeat center center fixed;

És mivel a fájl elég nagy, a webpack a fájlt ugyanúgy átalakítja, mint a többi köteget a kimeneti könyvtárba. HTTP-kérést fog küldeni ezért a képért, amikor a weboldal betöltődik.

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