ReactJS =>ローカルイメージがロードされていません

Question

私はこのプロジェクトでReactJSを使用していますが、画像以外はすべて正常に動作します。奇妙な何

は、それが「http://Example.com/image.jpg」のように、外部画像をロードしますが、それはローカルの画像

<img src={'/imgs/logo.jpg'} /> 

助けてください、私をロードしないということでしょうか？

ありがとうございました！

コード：

<img src={ require('/imgs/logo.png') }/> 

Answer 1

このように、あなたのIMG SRCに必要と試してみてください。その後、コード<img src={ image } />で使用することができます。また、あなたは（webpack2用コード）を以下のようにファイルローダーを含める必要があります。

module.exports = { 
    ..., 
    module: { 
    rules: [ 
     ..., 
     { test: /\.png$|\.jpg$/, loader: 'file-loader' }, // Add other extensions if needed 
    ] 
    }, 
    ... 
} 

Answer 2

あなたは、@ Louie4と@hinokで述べたように画像をconst image = require('imgs/logo.png')する必要があります。

import React, { Component } from 'react'; 
import { Link } from 'react-router'; 

class Header extends Component { 
    render() { 
    return (
     <div className="container-fluid"> 
     <div className="row"> 
      <nav className="navbar" role="navigation"> 
      <div className="navbar-header"> 
       <Link to="/App"> 
        <img src={'/imgs/logo.png'} alt="Jybly Logo" /> 
       </Link> 
       <button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <img className="bar" src='/imgs/icon-bar.png' /> 
       </button> 
      </div> 
      <div className="collapse navbar-collapse"> 
       {/* 
       <ul class="nav navbar-nav"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Stay</a></li> 
       </ul> */} 
       <ul className="nav navbar-nav navbar-right"> 
       <li><Link to="/pages/register">Login/Join</Link></li> 
       <li><Link to="/pages/cart">Cart</Link></li> 
       </ul> 
      </div> 
      {/*/.nav-collapse */} 
      </nav> 
     </div> 
     </div> 
    ); 
    } 
} 

export default Header; 

Answer 3

私はこのようにそれをコーディングして

、それはこのような単純なだった

それを考え出しました：

img src={ require('/imgs/logo.png') }/> 

またはこのような：

img src={'/imgs/logo.png'}/> 

しかし、それはこのように、実際には：

img src={ require('../imgs/logo.png') }/> 

2ドット、LOL。