ReactJS + Webpack：为什么未捕获错误：找不到模块“../media/interiorTest.jpg”？

Question

我有一个使用 ReactJS 运行的 Webpack，我正在尝试抓取图像并显示它，但出现错误：Uncaught Error: Cannot find module "../media/interiorTest.jpg"

这是我尝试过的：

  <div>
    <img src={require("../media/interiorTest.jpg")}/>
  </div>

目录树是（我正在尝试从home-page.js 获取interiorTest.jpg）：

而我的webpack.config.js 是：

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const config = {
  context: __dirname,
  entry: './src/index.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        test: /\.(js|jsx)$/,
        loader: 'babel'
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('css!sass')
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  },
  plugins: [
    new webpack.DefinePlugin({ 'process.env':{ 'NODE_ENV': JSON.stringify('production') } }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: false },
      output: {comments: false },
      mangle: false,
      sourcemap: false,
      minimize: true,
      mangle: { except: ['$super', '$', 'exports', 'require', '$q', '$ocLazyLoad'] }
    }),
    new ExtractTextPlugin('src/public/stylesheets/app.css', {
      allChunks: true
    })
  ]
};

module.exports = config;

Answer 1

通过查看webpack.config.js 中的代码和您包含的屏幕截图，您的目录结构看起来像

app/
    src/
         actions/
         components/
         ...
         public/

在webpack.config.js 你有这个代码

  devServer: {
    historyApiFallback: true,
    contentBase: './'
  },

contentBase 属性定义了服务器运行时加载文件的目录，并且由于您将其设置为'./'，这意味着文件/数据将从@加载987654327@目录。

这就是从public 目录链接文件的原因，您还必须在路径中包含/src/public，例如src="/src/public/folder/where/image/is-located/image.jpg"

在这种情况下

  <div>
    <img src="/src/public/media/interiorTest.jpg" alt="" />
  </div>

注意

• 通常代码分为两个文件夹，src 用于存储您正在处理的代码，public 用于 webpack 存储已编译的代码和静态资源。我们只是将/public 设置为contentBase。

  值得您花时间研究一下 react 和 javascript 应用程序的目录结构

• 图片最好有alt=""，只需输入最能描述图片的替代文字即可。