如何用React.js用webpack-2显示图像

Question

如何在React.js项目中加载图像(jpg)文件？我在/src/images中保存了该图像，文件名为iphone-template.jpg。

webpack.config.js

const { resolve } = require('path');
const webpack = require('webpack');

module.exports = {
  entry: [
    'react-hot-loader/patch',
    // activate HMR for React

    'webpack-dev-server/client?http://localhost:8080',
    // bundle the client for webpack-dev-server
    // and connect to the provided endpoint

    'webpack/hot/only-dev-server',
    // bundle the client for hot reloading
    // only- means to only hot reload for successful updates

    './index.js'
    // the entry point of our app
  ],
  output: {
    filename: 'bundle.js',
    // the output bundle

    path: resolve(__dirname, 'docs'), // changed 'dist' to 'www'

    publicPath: '/'
    // necessary for HMR to know where to load the hot update chunks
  },

  context: resolve(__dirname, 'src'),

  devtool: 'inline-source-map',
  // devtool: "source-map"

  devServer: {
    hot: true,
    // enable HMR on the server

    contentBase: resolve(__dirname, 'docs'), // changed 'dist' to 'www'
    // match the output path

    publicPath: '/'
    // match the output `publicPath`
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        use: [ 'babel-loader'],
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader'],
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=100000'
      },

      // the below webpack config was sourced from this,
      // https://github.com/coryhouse/react-slingshot/issues/128
      // in order to load favicon.
      {
          test: /\.jpe?g$|\.ico$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$/,
          loader: 'file-loader?name=[name].[ext]'  // <-- retain original file name
      },
      {
        test: /\.(png|jpg|)$/,
        loader: 'file-loader?name=/images/[name].[ext]'
      },
      {
        test: /\.(png|jpg|gif)$/,
        loader: "file-loader?name=img/img-[hash:6].[ext]"
      },
      {
        test: /\.(jpg|png|svg)$/,
        loader: 'file',
        include: './src/images'
}
    ],
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    // enable HMR globally

    new webpack.NamedModulesPlugin(),
    // prints more readable module names in the browser console on HMR updates

    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
  ],
};

App.js

import iPhone from '../images/iphone-template.jpg';

    const App = (props) => {
      return (
        <div id="parent">
          <NavBar {...navbar} />
          {/* see scratchpad.txt for removed div. */}
          <div id="iphone">
            {/*<img src={iPhone} />*/}
            <img className="iphone-template" src={iPhone} />
          </div>

我看到了像下面这样的错误图像。

​

Answer 1

如果确实是webpack 2，您将需要在所有加载程序的名称中使用file-loader，因为它不再只支持file或url使用加载器。

除此之外，还有几个影响到你的.jpg .png .gifs等等。您可以消除复制，只需为它们编写一个，因为您正在有效地复制文件(没有优化，没有哈希重命名)，除非您希望在发行版中复制根目录、图像和img目录。

但问题是，您如何访问要显示的页面？