Come caricare i file di immagine con il caricatore di file webpack

Sto usando webpack per gestire un progetto reactjs . Voglio caricare le immagini in javascript da webpack file-loader . Di seguito è il webpack.config.js :

 const webpack = require('webpack'); const path = require('path'); const NpmInstallPlugin = require('npm-install-webpack-plugin'); const PATHS = { react: path.join(__dirname, 'node_modules/react/dist/react.min.js'), app: path.join(__dirname, 'src'), build: path.join(__dirname, './dist') }; module.exports = { entry: { jsx: './app/index.jsx', }, output: { path: PATHS.build, filename: 'app.bundle.js', }, watch: true, devtool: 'eval-source-map', relativeUrls: true, resolve: { extensions: ['', '.js', '.jsx', '.css', '.less'], modulesDirectories: ['node_modules'], alias: { normalize_css: __dirname + '/node_modules/normalize.css/normalize.css', } }, module: { preLoaders: [ { test: /\.js$/, loader: "source-map-loader" }, ], loaders: [ { test: /\.html$/, loader: 'file?name=[name].[ext]', }, { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?presets=es2015', }, {test: /\.css$/, loader: 'style-loader!css-loader'}, {test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader?name=/public/icons/[name].[ext]"}, { test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader?presets=es2015'] } ] }, plugins: [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, }, output: { comments: false, }, }), new NpmInstallPlugin({ save: true // --save }), new webpack.DefinePlugin({ "process.env": { NODE_ENV: JSON.stringify("production") } }), ], devServer: { colors: true, contentBase: __dirname, historyApiFallback: true, hot: true, inline: true, port: 9091, progress: true, stats: { cached: false } } } 

Uso questa linea per caricare i file immagine e copiarli nella directory dist / public / icons e mantenere lo stesso nome file.

 {test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader?name=/public/icons/[name].[ext]"} 

Ma ho due problemi a usarlo. Quando webpack comando webpack , il file immagine è stato copiato nella directory dist / public / icons / come previsto. Come, è stato anche copiato nella directory dist con questo nome di file “df55075baa16f3827a57549950901e90.png”.

Di seguito la mia struttura di progetto: inserisci la descrizione dell'immagine qui

Un altro problema è che io uso sotto il codice per importare questo file immagine ma non può essere mostrato sul browser. Se sto usando url ‘public / icons / imageview_item_normal.png’ sul tag img, funziona perfettamente. Come utilizzare l’object importato dal file immagine?

 import React, {Component} from 'react'; import {render} from 'react-dom'; import img from 'file!../../public/icons/imageview_item_normal.png' export default class MainComponent extends Component { render() { return ( 
download
) } } const styles = { container: { width: '100%', height: '100%', } }

Riguardo al problema n. 1

Una volta che il caricatore di file è stato configurato nel webpack.config, ogni volta che si usa import / require verifica il percorso con tutti i caricatori e, nel caso in cui vi sia una corrispondenza, passa il contenuto attraverso quel caricatore. Nel tuo caso, corrisponde

 { test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader?name=/public/icons/[name].[ext]" } 

e quindi vedi l’immagine emessa

 dist/public/icons/imageview_item_normal.png 

qual è il comportamento desiderato

Il motivo per cui stai ricevendo il nome del file hash, è perché stai aggiungendo un caricatore di file inline aggiuntivo. Stai importando l’immagine come:

 'file!../../public/icons/imageview_item_normal.png'. 

Prefisso con file! , passa di nuovo il file nel caricatore di file e questa volta non ha la configurazione del nome.

Quindi la tua importazione dovrebbe davvero essere solo:

 import img from '../../public/icons/imageview_item_normal.png' 

Aggiornare

Come notato da @cgatian, se in realtà si desidera utilizzare un caricatore di file inline, ignorando la configurazione globale del pacchetto Web, è ansible anteporre l’importazione con due punti esclamativi (!!):

 import '!!file!../../public/icons/imageview_item_normal.png'. 

Riguardo al problema n. 2

Dopo aver importato il png, la variabile img contiene solo il percorso che il file-loader “conosce”, ovvero public/icons/[name].[ext] (ovvero "file-loader? name=/public/icons/[name].[ext]" ). Il tuo output dir “dist” è sconosciuto. Potresti risolvere questo in due modi:

  1. Esegui tutto il tuo codice nella cartella “dist”
  2. Aggiungi la proprietà publicPath alla configurazione di output, che punta alla directory di output (nel tuo caso ./dist).

Esempio:

 output: { path: PATHS.build, filename: 'app.bundle.js', publicPath: PATHS.build }, 

Ho avuto un problema nel caricare immagini nel mio progetto React JS. Stavo cercando di usare il caricatore di file per caricare le immagini; Stavo anche usando il caricatore Babel nella mia reazione.

Ho usato le seguenti impostazioni nel webpack:

 {test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader?name=app/images/[name].[ext]"}, 

Questo ha aiutato a caricare le mie immagini, ma le immagini caricate erano in qualche modo corrotte. Poi, dopo alcune ricerche, ho scoperto che il caricatore di file ha un bug nel corrompere le immagini quando è installato babel-loader.

Quindi, per aggirare il problema, ho provato a utilizzare URL-loader che ha funzionato perfettamente per me.

Ho aggiornato il mio webpack con le seguenti impostazioni

 {test: /\.(jpe?g|png|gif|svg)$/i, loader: "url-loader?name=app/images/[name].[ext]"}, 

Ho quindi utilizzato il seguente comando per importare le immagini

 import img from 'app/images/GM_logo_2.jpg' 
 

In alternativa puoi scrivere lo stesso come

 { test: /\.(svg|png|jpg|jpeg|gif)$/, include: 'path of input image directory', use: { loader: 'file-loader', options: { name: '[path][name].[ext]', outputPath: 'path of output image directory' } } } 

e quindi utilizzare l’importazione semplice

import varName from 'relative path';

e in jsx scrivi come

.... sono per altri attributi di immagine

Installare prima il caricatore di file:

 $ npm install file-loader --save-dev 

E aggiungi questa regola in webpack.config.js

  { test: /\.(png|jpg|gif)$/, use: [{ loader: 'file-loader', options: {} }] }