Images always appear broken when using webpack react

Question

I have tried looking this up for days and nothing seems to be working. I have a Webpack that isn't properly loading my images. In the network tab, my images are coming back as a 200 response, but when I load the page, the image appears broken.

This is a picture of my webpack

This is my file structure

index.js

This is what I see when I run locally

Can someone please enlighten me?

Answer 1

Hey by seeing your code I can just say you can try to just write the name of the import rather than the path and then try like

Import test from “../test.png”;

<img src={test}/>

And then use like

Answer 2

Thanks to all those who tried to help me! Ironically, after countless of hours of trying to figure it out, the moment I post it here, lightbulb went off and I resolved the issue myself.

I had two problems. First was how I was adding it to my webpack, and the second was how I was calling it in my index.js.

Below is the new webpack:

const path = require('path');

module.exports = {
 output: {
  path: path.join(__dirname, '/client/dist/js'),
  filename: 'app.js'
 },

 module: {
loaders: [
  {
    test: /\.js?$/,
    include: path.join(__dirname, '/client/src'),
    loader: 'babel-loader',
    query: {
      presets: ["react", "es2015"]
    }
  },
  {
      test: /\.(png|jpg|gif)$/,
      loader: 'url-loader'
    }
   ]
  },
  devtool: "source-map"
};

and this is my new index.js

import React from 'react';
import handclick from './images/hand-click.png';


class App extends React.Component {
 render() {
  return (
    <div>

      <img style={{width:300}}
       src={handclick}/>
      <br/>
      Hello world!!
    </div>
  );
 }
}

export default App;

Thanks all!