React Api Images

Question

Having some issues. First of all, I can't load or render any images, for example, logo in my code. Getting "You may need an appropriate loader to handle this file type error." I have a doubt, that something wrong with my webpack.config file, but i can't figure it out. There are two of them:

One:

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

second:

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"
    }
} 

i have made some changes adding types of images, but i'm not sure if i'm right.

Another issue. There are several files: 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>

    );
  }

} 

and 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>
        )
    }
} 

Now AC text area field works with given array 'First','Second','Third', 'Fourth','Fifth', But i would like that data would be taken from api, for example: GET: [linkstarts={search_text}&linkends.

What changes should i make?