ReactJS + Webpack: Why Uncaught Error: Cannot find module "../media/interiorTest.jpg"?

Question

我有一个 Webpack 运行 ReactJS，我正在尝试抓取图像并显示它但出现错误：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 属性定义当服务器为运行时将从中加载文件的目录，并且由于您已将其设置为 './',表示files/data将从app目录加载

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

在这种情况下

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

备注

通常代码会被分成两个文件夹，src存放你正在处理的代码，publicwebpack存放编译后的代码和静态资源.我们只是将 /public 设置为 contentBase.

花时间研究 React 和 javascript 应用程序的目录结构是值得的
图片有 alt="" 很好，只需输入最能描述图片的替代文字即可。

ReactJS + Webpack: Why Uncaught Error: Cannot find module "../media/interiorTest.jpg"?

ReactJS + Webpack: Why Uncaught Error: Cannot find module "../media/interiorTest.jpg"?

html

javascript

reactjs

webpack

react-jsx