如何使用Webpack-2和React.js显示图像

Question

How do I load an image (jpg) file within a React.js project? I saved the image in /src/images with a filename of, 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>

I'm seeing an error image like the one below.

Answer 1

If it's indeed webpack 2, you'll need to use file-loader in all the names of your loaders, because it no longer supports just file or url to use the loaders.

Other than that, you have several of them affecting your .jpg .png .gifs, etc .. you can get rid of the duplication and just write one for them all, as all you are doing effectively is copying the files (no optimization, no hash renaming), unless you'd want copies on your root, your images and your img directories within distribution

But here is the question, how are you accessing the page to display?