使用webpack react

Question

我已经尝试了好几天，但似乎没有任何效果。我的Webpack无法正确加载图像。在“网络”标签中，我的图像以200响应的形式返回，但是当我加载页面时，图像似乎损坏了。

这是我的webpack的图片

This is my file structure

index.js

这是我在本地运行时看到的

有人可以启发我吗？

Answer 1

嘿，通过查看您的代码，我可以说您可以尝试仅输入导入名称而不是路径，然后尝试

从“ ../test.png”导入测试；

<img src={test}/>

然后使用like

Answer 2

尝试关注

<img src= handClick/>

Answer 3

感谢所有尝试帮助我的人！具有讽刺意味的是，在经过数小时的尝试来解决这个问题之后，当我将其发布到此处时，灯泡熄灭了，我自己解决了该问题。

我有两个问题。首先是如何将其添加到Webpack中，其次是如何在index.js中调用它。

下面是新的Webpack：

const path = require('path');

module.exports = {
 output: {
  path: path.join(__dirname, '/client/dist/js'),
  filename: 'app.js'
 },

 module: {
loaders: [
  {
    test: /\.js?$/,
    include: path.join(__dirname, '/client/src'),
    loader: 'babel-loader',
    query: {
      presets: ["react", "es2015"]
    }
  },
  {
      test: /\.(png|jpg|gif)$/,
      loader: 'url-loader'
    }
   ]
  },
  devtool: "source-map"
};

这是我的新index.js

import React from 'react';
import handclick from './images/hand-click.png';


class App extends React.Component {
 render() {
  return (
    <div>

      <img style={{width:300}}
       src={handclick}/>
      <br/>
      Hello world!!
    </div>
  );
 }
}

export default App;

谢谢！