React Api Images

Question

Наличие некоторых проблем.Прежде всего, я не могу загружать или отображать изображения, например логотип в моем коде.Получение «Вам может понадобиться соответствующий загрузчик для обработки этой ошибки типа файла».У меня есть сомнения, что-то не так с моим файлом webpack.config, но я не могу понять это.Их два:

Один:

var webpack = require('webpack');
module.exports = {
  entry: './modules/index',
  output: {
    filename: 'dist/ReactHotAPI.js',
    libraryTarget: 'umd',
    library: 'ReactHotAPI'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin()
  ]
};

секунда:

module.exports = {
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" },
            { test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
              loader: 'url-loader?limit=100000' }]},            { test: /\.jade$/, loader: "jade?self" }
        ]
    },
    node: {
        fs: "empty"
    }
} 

Я сделал некоторые изменения, добавив типы изображений, но я не уверенесли я прав.

Еще одна проблема.Есть несколько файлов: pages.js

import React from 'react';
import { browserHistory } from 'react-router';
import styles from './AutoComplete.css';

import AutoComplete from './AutoComplete';
import AutoComplete2 from './AutoComplete';

export default class LoginPage extends React.Component {
  signUp() {
    browserHistory.push('/home');
  }

  render() {
    return (
        <div className="App">
            <div className="Page-Component">
                <p className={styles.AutoComplete}><AutoComplete text="AutoComplete" /></p>
                <p className={styles.White}></p>
                <p className={styles.AutoComplete}><AutoComplete2 text="AutoComplete2" /></p>

            </div>
        </div>

    );
  }

} 

и autocomplete.js

import React from 'react';
import './style.css';
import './AutoComplete.css';
//import './film.png';

export default class AutoComplete2 extends React.Component {
    constructor(props) {
        super(props);
        this.items = [
            'First',
            'Second',
            'Third',
            'Fourth',
            'Fifth',

        ];
        this.state = {
            suggestions: [],
            text: '',
        };
    }

    onTextChanged = (e) => {
        const value = e.target.value;
        let suggestions = [];
        if (value.length > 0) {
            const regex = new RegExp(`^${value}`, 'i');
            suggestions = this.items.sort().filter(v => regex.test(v));
            }
        this.setState (() => ({suggestions, text: value }));
    }

    SuggestionSelected (value) {
        this.setState (() => ({
            text: value,
            suggestions: [],
        }))
    }

    renderSuggestions () {
        const { suggestions } = this.state;
        if (suggestions.length === 0) {
            return null;
            }
        return (
            <ul>
                {suggestions.map((item) => <li onClick={() => this.suggestionSelected(item) }>{item}</li>)}
            </ul>
    );
}

    render() {
        const { text } = this.state;
        return (
            <div className="AutoComplete">
                <input value={text} onChange={this.onTextChanged} type="text" placeholder="&#61896; Enter movie name" charSet="utf-8" />

                {this.renderSuggestions()}
            </div>
        )
    }

    render() {
        const { text } = this.state;
        return (
            <div className="AutoComplete2">
                <input value={text} onChange={this.onTextChanged} type="text" placeholder="&#61896; Enter movie name" charSet="utf-8" />

                {this.renderSuggestions()}
            </div>
        )
    }
} 

Теперь поле текстовой области AC работает с заданным массивом «Первый», «Второй», «Третий», 'Четвертый', 'Пятый', но я хотел бы, чтобы эти данные были взяты из API, например: GET: [linkstarts = {search_text} & linkends.

Какие изменения я должен внести?