Question

我无法使用Webpack和React在一个简单的应用中显示一个简单的图像。

我通过这种方式阅读并尝试了几种不同的方法，但不断出现各种错误，或者最多有时没有错误，但也没有图像显示。

这是我的React组件：

import React from 'react';
import styles from '../css/main.css';

import Menu from './Menu';

const logo = require('./images/PIVX_Planet_1a_239x83.png');

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {test: 'foo'};
  }
  render() {
    return (
      <div>
        <div id='container'></div>

        <div className={styles.logo}>
          <img src={logo}/>
        </div>
        <div>
          <Menu/>
        </div>
      </div>
    );
  }
}

这是我的webpack配置：

...
module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        "presets": ["react", "es2015", "stage-0", "react-hmre"]
      }
    }, {
      test: /\.(jpg|png|svg)$/,
      loader: 'url-loader',
      options: {
        limit: 25000,
      },
    }, {
      test: /\.json?$/,
      loader: 'json'
    }, {
      test: /\.css$/,
      loader: 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]'
    }]
  }
...

有了这个，在控制台中从webpack获取错误：

./app/components/App.js中的错误找不到模块：错误：无法解析/ Users / mac / _DEV / _LAB / PIVX / PIVX-Planet-2 / app / components中的'file'或'directory'./ images / PIVX_Planet_1a_239x83.png @ ./app/components/App.js 67：11-56

我也尝试过使用babel-plugin-transform-react-jsx-img-import （https://www.npmjs.com/package/babel-plugin-transform-react-jsx-img-import）

然后使用：

<div className={styles.logo}>
  <img src="./images/PIVX_Planet_1a_239x83.png"/>
</div>

在这种情况下，没有错误，但图像显示已损坏。

我尝试用所有这些组合更改图像的相对路径。

目录结构：

应用
- 部件
  - App.js
- 图像
  - PIVX_Planet_1a_239x83.png
- 的index.html ...

任何见解？

Answer 1

根据您的目录结构，您需要使用的路径是

const logo = require('../images/PIVX_Planet_1a_239x83.png');

因为图片位于app目录下，而不在components下，您尝试获取image位置

还要确保所有loaders都已正确安装

Answer 2

您也可以尝试使用：

let logo = require('../images/PIVX_Planet_1a_239x83.png');

始终尽量使用let来避开范围怪物

Answer 3

我一直在使用的问题

import logo from './images/PIVX_Planet_1a_239x83.png'

代替

const logo = require('./images/PIVX_Planet_1a_239x83.png');

在带有定制webpack配置的打字稿反应应用中。

使用Webpack在React中加载图像

3 个答案: