次のようにReactコードに画像をインポートしようとしています(私はbabelを使用しています):
import borgCube from '../assets/cube.png';
<img className="img-rounded" src={borgCube}></img><p />
ブラウザで壊れた画像を調べると、次のように表示されます。
<img class="img-rounded" src="data:image/png;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICI5NTU1ZGJiNWQ3YjUzMjA3N2NjNWQyMzc4ZDgzNzVmZS5wbmciOw==">
css-modules を追加するまでは機能していました。これは私のwebpack構成がどのように見えるかです:
var webpack = require('webpack');
var path = require('path');
var combineLoaders = require('webpack-combine-loaders');
const isDebug = !process.argv.includes('--release');
module.exports = {
devtool: 'eval',
entry: {
app: [
'webpack-dev-server/client?http://0.0.0.0:3000',
'webpack/hot/only-dev-server',
'./src/index'
]
},
output: {
filename: '[name].js',
path: path.join(__dirname, './build'),
publicPath: 'http://localhost:3000/build/'
},
resolve: {
extensions: ['', '.js', '.jsx', '.css', '.png'],
modulesDirectories: ['src', 'node_modules']
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
loaders: ['react-hot', 'babel'],
exclude: /node_modules/
},
{ test: /\.(woff|png)$/, loader: 'url-loader?limit=10000' },
{ test: /\.(png|jpg)$/, loader: 'file-loader'},
{
test: /\.css$/,
loader: combineLoaders([
{
loader: 'style-loader'
}, {
loader: 'css-loader',
query: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
])
},
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development') }
})
]
};