javascript - Webpack - Vaatia kuvia käyttämällä file-loaderia

Käytän Webpackia React-sovelluksessani.

Asensin 'File-loaderin' ja 'Url-loaderin' webpack-konfiguraatiooni.

Kuitenkin en ole varma, miten liittää kuvia komponentteihini. Säilytän kuvan 'src':n 'Data.js'-tiedostossa, josta välitän kuvatiedot React-komponentille.

Minun webpack.config.js-tiedostoni:

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

React-esityskomponentissani käytän yksinkertaisesti require-komentoa kuvan hakemiseen:

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

Data.js-tiedostossa on absoluuttiset polut (pääsovelluskansio) jokaiselle kuvalle (voin olla väärässä tässä):

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

Maailmanlaajuinen hakemiston kuva, mitä sen arvo on:

Mietin, missä teen virheitä ja miten ratkaista tämä?

MUOKKAUS : Luettuani eri lähteitä, tajusin, että webpack tarvitsee viitteen kuvan suhteellisesta sijainnista, joten olen muokannut webpack.config.js tiedostoa seuraavasti:

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

Kuitenkin se ei ratkaise ongelmaa. Ohjausta arvostettaisiin suuresti.

Vastaus #1

webpack ei tue asynkronista resurssia nyt, se tarkoittaa, että jos haluat vaatia kuvan, sinun pitäisi vain lähettää sille kuvan polku. juuri näin:

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

kuvan URL-osoite ei voi olla muuttuja, koska kun webpack pakkaa koodisi, se ei suorita koodiasi, joten muuttujasi arvoa ei voi tietää.

jos todella haluat käyttää require-asynkronisesti. voit yrittää käyttää require.ensure

Vastaus #2

Ehdotuksia :

1. Käytä url-loader-lataajaa kuville.
Määrittämällä limit webpack-konfiguraatiossa, esimerkiksi: url-loader?limit=8000, jos tiedosto on pienempi kuin 8000 tavua, url-loader toimii kuin file-loader. Upota tiedostot pääsisäänmenon pakettiin. Jos ei, katso kohta 2.

2. Käytä url(osoite) css/scss:ssä kuvien käyttämiseen
Tässä on esimerkki, joka toimii Webpackin ja url-loaderin avulla:
background: url('../images/heroBanner.png') no-repeat center center fixed;

Ja koska tiedosto on tarpeeksi suuri, webpack muuntaa tiedoston aivan kuten muutkin niput tulostuskansioon. Se lähettää HTTP-pyynnön tästä kuvasta, kun verkkosivu latautuu.

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