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

Question

我有一个使用 ReactJS 运行的 Webpack，我尝试抓取图像并显示它，但收到错误:未捕获错误:找不到模块“../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 属性定义了服务器运行时将加载文件的目录，并且由于您已将其设置为 './'，因此它表示文件/data 将从 app 目录加载。

这就是从 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 存储编译后的代码，静态 Assets 。我们只需将 /public 设置为 contentBase。

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

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