react.jsでローカルイメージを使用できません

Question

基本的に私はローカルイメージを使用できません。なぜか本当にわかりません。私はurl-loaderとfile-loaderをインストールし、ファイルを要求しようとしています。

HeaderNavigation.js（私が使用しようとしている画像は、同じディレクトリにあり、ブランドイメージと呼ばれています）。

/** 
* Created by Hewlbern on 17-Jan-17. 
*/ 
import React from 'react'; 
import { LinkContainer } from 'react-router-bootstrap'; 
import { Nav, Navbar, NavDropdown, MenuItem, NavItem } from 'react-bootstrap'; 

//import NavLink from "./Navlink" 

export default React.createClass ({ 
    render() { 
     /* <img src={require('./Example.png')} /> */ 
     // var Replace = "http://cdn.playbuzz.com/cdn/08421690-8191-4264-b479-ce42341e2389/be95b1c7-c95d-41c2-ae7d-1713e67462f3.jpg"; 
     return (
      <div> 
       <Navbar collapseOnSelect> 
        <Navbar.Header> 
         <Navbar.Brand> 
          <LinkContainer to ="/"> 
           <img src = {require('./Example.png')}/> 
          </LinkContainer> 
         </Navbar.Brand> 
         <Navbar.Toggle /> 
        </Navbar.Header> 
        <Navbar.Collapse> 
         <Nav bsStyle = "tabs" > 
          <LinkContainer to ="/Product"> 
           <NavItem eventKey = "{1}" > 
             Product 
           </NavItem> 
          </LinkContainer> 
          <LinkContainer to ="/About"> 
           <NavItem eventKey = "{2}"> 
             About 
           </NavItem> 
          </LinkContainer> 
          <NavDropdown id="nav-dropdown" title ="More" eventKey = "{3}" pullRight> 
           <LinkContainer to ="/Background"> 
            <MenuItem eventKey = "{1}"> 
              Background 
            </MenuItem> 
           </LinkContainer> 
           <LinkContainer to ="/Contact Us"> 
            <MenuItem eventKey = "{2}"> 
              Contact Us 
            </MenuItem> 
           </LinkContainer> 
          </NavDropdown> 
         </Nav> 
        </Navbar.Collapse> 
       </Navbar> 
      </div> 
     ); 
    } 
}); 

これは私のwebpackファイルです。

webpack.config.js

var webpack = require("webpack"); 
var path = require("path"); 

var DEV = path.resolve(__dirname, "dev"); 
var OUTPUT = path.resolve(__dirname, "output"); 

var config = { 
    entry: DEV + "/App.js", 
    output: { 
     path: OUTPUT, 
     filename: "myCode.js" 
    }, 
module: { 
    loaders: [ 
     // js 
     { 
      test: /\.js$/, 
      exclude: /node_modules/, 
      loaders: ['babel'], 
      presets: ['es2015', 'react'], 
      include: DEV, 
     }, 
     // PNG 
     { 
      test: /\.(gif|jpe?g|png|ico)$/, 
      loader: 'url-loader?limit=10000' 
     }, 

     { 
      test: /\.(png|jpg)$/, 
      loader: 'file-loader' 
     }, 

     // CSS 
     { 
      test: /\.scss$/, 
      include: path.join(__dirname, 'client'), 
      loader: 'style-loader!css-loader!sass-loader' 
     }, 
    ] 
    } 
}; 

module.exports = config; 

Answer 1

で、その後私

import Img from './Example.png' 

のために動作します。 Reactプロジェクトの既定値はpublicです。あなたのimagesフォルダを入れてください。それが動作します。

Answer 2

私は私の現在のプロジェクトでこの設定を使用しています、これを試してみてください。あなたがそのようなWOFF、TTFやその他多くのファイルのフォント・アイコンのタイプのためのローダーをspecfiedしていないようだエラーから

module: { 
    loaders: [{ 
     test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'url?limit=10000&mimetype=application/font-woff', 
    }, { 
     test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'url?limit=10000&mimetype=application/font-woff2', 
    }, { 
     test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'url?limit=10000&mimetype=application/octet-stream', 
    }, { 
     test: /\.otf(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'url?limit=10000&mimetype=application/font-otf', 
    }, { 
     test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'file', 
    }, { 
     test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'url?limit=10000&mimetype=image/svg+xml', 
    }, { 
     test: /\.png$/, 
     loader: 'file?name=media/[name].[ext]', 
    }, { 
     test: /\.jpg$/, 
     loader: 'file?name=media/[name].[ext]', 
    }], 
    } 

Answer 3

。

また、url-loaderとfile-loaderがインストールされていることを確認してください。あなたのWebPACK設定ファイルのローダー以下

使用 -

{ 
      test : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, 
      loader : 'file' 
    }, 

同様にイメージをロードしますが、このようなこの1

'url?limit=10000&mimetype=image/svg+xml' 

としてURLローダーを使用する場合は、以下のローダー

{ 
      test : /\.(png|jpg|jpeg)$/, 
      include : path.join(__dirname, 'img'), 
      loader : 'url-loader?limit=30000&name=images/[name].[ext]' 
    } 

を使用することができます

これは、URL経由で読み込むことができる最大ファイルサイズが10kbであり、 pe（メディアファイルタイプを認識する方法）はsvg imageで、httpリソースURLとしてファイルを受信します。

あなたのファイルサイズが10 kbよりも大きい場合、それはurl-loaderによってロードされることはありません代わりに、file-loaderによってロードされるとfile-loaderは静的assestとしてファイルを提供します。

Answer 4

これは、あなたがやっているようあなたがlocal relative URLとロードイメージをしたい場合は、あなたのimgタグ

<img src = {Img} />