javascript - 带有 semantic-ui-react 和 webpack 的图像组件的路径

Question

我正在使用 webpack 构建一个 ReactJS 应用。

这个简单的例子应该呈现一个 <img>给定的网址为 src -属性。

我如何将图像资源与 webpack 捆绑在一起并通过适当的加载程序对其进行处理？我不明白，为什么图像资源没有被捆绑。

我不包括生成的 admin.bundle.js像这样<script src="/admin/dist/admin.bundle.js"></script> ，因为我不是在谈论prod环境。我正在使用 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)项目的目录结构如下(我省略了不相关的目录/文件以澄清):

.
├── 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

为了让 webpack 捆绑您的图像，您需要像导入任何其他资源一样导入它。不确定路径是否正确，因为我不知道您的图像位于何处，但这是一般的想法。

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;