Javascript 如何使用带有React.js的webpack-2显示图像

如何在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'
    }),
  ],
};

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>

const{resolve}=require（'path'）；
const webpack=require（'webpack'）；
module.exports={
条目：[
“反应热加载程序/修补程序”，
//激活HMR进行反应
'网页包开发服务器/客户端？http://localhost:8080',
//捆绑Web包开发服务器的客户端
//并连接到提供的端点
“webpack/hot/only dev server”，
//捆绑客户端以进行热重新加载
//仅-表示仅热重新加载以成功更新
“./index.js”
//我们应用程序的入口点
],
输出：{
文件名：“bundle.js”，
//输出包
路径：resolve（_dirname，'docs'），//将'dist'更改为'www'
公共路径：'/'
//HMR需要知道在哪里加载热更新块
},
上下文：解析（uu dirname，'src'），
devtool:“内联源映射”，
//devtool：“源地图”
开发服务器：{
热：是的，
//在服务器上启用HMR
contentBase:resolve（_dirname，'docs'），//将'dist'更改为'www'
//匹配输出路径
公共路径：'/'
//匹配输出“publicPath”`
},
模块：{
规则：[
{
测试：/\.js$/,，
使用：[“巴别塔加载器”]，
排除：/node\u模块/
},
{
测试：/\.css$/,，
用法：['样式加载器'，'css加载器']，
},
{
测试：/\（png | woff | woff2 | eot | ttf | svg）$/，
加载器：“url加载器？限制为100000”
},
//以下网页包配置源于此，
// https://github.com/coryhouse/react-slingshot/issues/128
//以便加载favicon。
{
测试：/\.jpe？g$\.ico$\.gif$\.png$\.svg$\.woff$\.ttf$\.wav$\.mp3$/，
加载器：“文件加载器？名称=[name].[ext]'//{
返回(
{/*请参阅scratchpad.txt以获取已删除的div.*/}
{/**/}

我看到一个错误图像，如下图所示。

---

如果它确实是webpack 2，您需要在所有加载程序的名称中使用

文件加载程序

，因为它不再只支持

文件

或

url

来使用加载程序

除此之外，您还有几个影响您的.jpg.png.gif等的文件。您可以消除重复，只需为所有文件编写一个，因为您所做的有效工作就是复制文件（无需优化，无需哈希重命名），除非您希望在根目录、图像和发行版中的img目录上创建副本

---

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

您当前的代码有任何问题吗？我想如果让我猜一猜，这将与webpack-2相关。这是什么？这段代码有什么问题？它没有显示图像。webpack中有任何生成错误吗？浏览器控制台中有任何错误吗？