请问在react组件里面的图片应该怎么写才能使webpack的url-loader识别并打包

Question

我在webpack配置文件里面已经加了url-loader。
在css里面直接background: url(./../img/logo.png)能够把图片转为base64，
在组件里面就不行

var About = React.createClass({
  render: function () {
    return (
      <div className="about-page">
        <img src='./../src/static/img/logo.png'/>
      </div>
    );
  }
});
module.exports = About;

Answer 1

webpack把js、css、图片等各种资源统一当作模块来处理，因此你可以像引入模块一样引入图片：

var About = React.createClass({
  render: function () {
    return (
      <div className="about-page">
        <img src={require('./../src/static/img/logo.png'}/>
      </div>
    );
  }
});
module.exports = About;

Answer 2

现在我所知道常见的写法
在jsx文件头部引入图片然后在img标签中直接写，下面给一个例子

'use strict';
import React, {Component} from 'react'

import Header from './Common/Header'

import product01_big from '../Img/mall/product01_big.jpg'

export default class ProductDetails extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    render() {
       
        return (
            <div className="product_details">
                <Header title="商品详情" />
                <div className="product_img">
                    <img src={product01_big} />
                </div>
            </div>
        )
    }
}

product01_big就是引入的图片

我使用的是webpack打包
webpack.config.js
` {

            test: /\.(png|jpg|gif|ico)$/,
            loader: 'url-loader?limit=3000&name=img/[name][hash:5].[ext]'
        }

`