ReactJS + Webpack: Почему нечистая ошибка: не удается найти модуль «../media/interiorTest.jpg»?

Question

У меня есть Webpack работает с ReactJS, и я пытаюсь захватить изображение и отобразить его, но получаю сообщение об ошибке: Uncaught Error: Cannot find module "../media/interiorTest.jpg"

А вот то, что я пробовал:

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

И дерево каталогов (Я пытаюсь извлечь interiorTest.jpg из home-page.js):

И мой 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 недвижимость определяет каталог, из которого файлы будут загружаться при запуске сервера. И так как вы установили i t как './'. Это означает, что файлы/данные будут загружены из каталога 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 для хранения скомпилированного кода и для статических активов. И мы просто установили /public как contentBase.

  Это будет стоить ваше время, чтобы сделать некоторые исследования, касающиеся структуры каталогов для среагировать и приложения

• JavaScript Его хорошо иметь alt="" для изображений, просто введите альтернативный текст, как это лучше всего описывает изображение.