javascript - Webpack - Requerer Imagens Usando File-Loader

Estou a usar o Webpack para a minha aplicação React.

Instalei o 'File-loader' e o 'Url-loader' na minha configuração do webpack.

No entanto, não tenho certeza de como ligar imagens aos meus componentes. Estou a guardar o 'src' da imagem num ficheiro 'Data.js', de onde passo os dados da imagem para o componente React.

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

No meu componente de apresentação em React, estou simplesmente a usar require para obter a imagem:

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

O ficheiro Data.js tem caminhos absolutos (pasta principal da aplicação) para cada imagem (posso estar a errar aqui):

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

Imagem de diretório global pelo que vale:

Pergunto-me onde estou a cometer os erros e como resolvê-los?

EDITAR : Depois de pesquisar, percebi que o webpack precisa de referência para a posição relativa da imagem, por isso alterei o webpack.config.js para o seguinte:

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

No entanto, isso não resolve o problema. A orientação seria muito apreciada.

Resposta #1

O webpack não suporta recursos assíncronos agora, o que significa que se quiser requerer uma imagem, deve apenas enviar o caminho da imagem para ele. exatamente desta forma:

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

O URL da imagem não pode ser uma variável, porque quando o webpack empacota o seu código, ele não executa o seu código, por isso não pode conhecer o valor da sua variável.

se quiser realmente usar require de forma assíncrona, pode tentar usar require.ensure

Resposta #2

Sugestões :

1. Utilize url-loader para imagens.
Ao especificar o limit na sua configuração do webpack, como: url-loader?limit=8000, se o ficheiro for inferior a 8000 Bytes, o url-loader funciona de forma semelhante ao file-loader. Insira os ficheiros no bundle de saída para a entrada principal. Caso contrário, veja o ponto 2.

2. Usar url(endereço) em css/scss para usar imagens
Aqui está um exemplo que é suportado pelo Webpack e url-loader:
background: url('../images/heroBanner.png') no-repeat center center fixed;

E porque o ficheiro é suficientemente grande, o webpack transforma o ficheiro tal como outros pacotes para o diretório de saída. Ele enviará um pedido HTTP para esta imagem quando a página web estiver a carregar.

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