semantic-ui-reactとwebpackを使用した画像コンポーネントのパス

Question

私はReactJSアプリケーションを使用しています。webpackを使用しています。

この単純な例では、与えられたURLをsrc -attributeとして<img>にする必要があります。

画像リソースをwebpackにバンドルして、適切なローダーを介して処理するにはどうすればよいですか？なぜ画像リソースがバンドルされないのかわかりません。私はPROD環境の話ではないを頂きますので

私は、このような<script src="/admin/dist/admin.bundle.js"></script>生成admin.bundle.jsが含まれていません。私はちょうどwebpack-dev-server --inline --hotを使用しているので、私はこのようにadmin.bundle.jsを含めています： <script src="http://localhost:8080/admin/dist/admin.bundle.js"></script>完全に動作します。

import React from 'react'; 
import { Container, Image } from 'semantic-ui-react'; 
import MainMenu from './menu/components/MainMenu'; 

const App =() => (
    <Container> 
    <Image src="/res/img/image.png" /> 
    <MainMenu /> 
    </Container> 
); 

export default App; 

は、次のように私の（symfonyのとReactJS）プロジェクトのディレクトリ構造がある（私は明確にする無関係なディレクトリ/ファイルommited）：

. 
├── README.md 
├── app 
│   ├── AppCache.php 
│   ├── AppKernel.php 
│   ├── Resources 
│   │   ├── client 
│   │   │   └── admin 
│   │   │    ├── node_modules 
│   │   │    ├── package.json 
│   │   │    ├── src 
│   │   │    │   ├── App.jsx 
│   │   │    │   ├── index.jsx 
│   │   │    │   ├── menu 
│   │   │    │   └── res 
│   │   │    ├── webpack.config.js 
│   │   └── views 
│   └── config 
└── web 
    ├── admin 
    │   ├── dist 
    ├── app.php 
    └── app_dev.php 

マイwebpack.config.jsをのような行く：

const path = require('path'); 
const webpack = require('webpack'); 

const basePath = path.normalize(__dirname + '/../../../../'); 

module.exports = { 
    entry: [ 
    './src/index.jsx' 
    ], 
    output: { 
    filename: 'admin.bundle.js', 
    publicPath: '/admin/dist/', 
    path: path.resolve(basePath, 'web', 'admin', 'dist') 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    ], 
    module: { 
    rules: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     use: [ 'react-hot-loader', 'babel-loader', 'eslint-loader' ] 
     }, 
     { 
     test: /\.css$/, 
     use: [ 'style-loader', 'css-loader' ] 
     }, 
     { 
     test: /\.(png|jpg)$/, 
     use: [ 
      { 
      loader: 'url-loader', 
      options: { 
       limit: 40000 // 40 kB 
      } 
      } 
     ] 
     }, 
     { 
     test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/, 
     loader: "file-loader" 
     } 
    ] 
    }, 

    resolve: { 
    modules: [ 
     path.resolve(__dirname, 'src'), 
     'node_modules' 
    ], 
    extensions: [ '.js', '.jsx' ] 
    }, 

    devServer: { 
    hot: true, 
    inline: true 
    } 
}; 

Answer 1

イメージをバンドルするには、他のリソースと同じようにイメージをインポートする必要があります。あなたのイメージがどこにあるのかわからないので、パスが正しいかどうかはわかりませんが、これは一般的な考えです。

import React from 'react'; 
import { Container, Image } from 'semantic-ui-react'; 
import MainMenu from './menu/components/MainMenu'; 

import myImage from '/res/img/image.png'; 

const App =() => (
    <Container> 
    <Image src={ myImage } /> 
    <MainMenu /> 
    </Container> 
); 

export default App;