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
index.js
This is what I see when I run locally
Can someone please enlighten me?
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!
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
