Question

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

这个简单示例应该使用给定网址if blue and cinder: productInfo(urlBlueResponse.text) productInfo(urlCinderResponse.text) elif blue: productInfo(urlBlueResponse.text) elif cinder: productInfo(urlCinderResponse.text) else: print(Fore.RED + timestamp呈现<img> - 属性。

如何将图像资源与webpack捆绑在一起并通过适当的加载程序进行处理？我无法弄清楚，为什么图像资源没有被捆绑。

我没有像src那样包含生成的admin.bundle.js，因为我不谈论 prod 环境。我只是使用<script src="/admin/dist/admin.bundle.js"></script>，所以我将webpack-dev-server --inline --hot包括在内：完全有效的admin.bundle.js。

<script src="http://localhost:8080/admin/dist/admin.bundle.js"></script>

我的（Symfony和ReactJS）项目的目录结构如下（我省略了无关的目录/文件以澄清）：

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;

我的webpack.config.js如下：

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

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;

具有语义-ui-react和webpack的图像组件的路径

1 个答案: