I migrated a project I have been working on to Webpack 2 and this has been kind of a headache. But I have gotten my project to preview using Webpack dev server, except it won't show my image. All I get is this error in the browser console GET http://localhost:8080/logo.jpg 404 (Not Found)
and in MacOS Console:
ERROR in ./js/components/Global/Menu.jsx Module not found: Error: Can't resolve 'logo.jpg' in '/Users/user1/Documents/AAA/app/js/components/Global'
This is my Webpack configuration:
const path = require('path');
module.exports = {
context: __dirname + "/app",
entry: {
app: "./js/app.js",
javascript: "./js/app.js",
html: "./index.html",
},
output: {
//output.path: "[name].js",
path: __dirname + "/dist",
filename: "[name].js"
},
resolve: {
alias: { 'react/lib/ReactMount': 'react-dom/lib/ReactMount' },
extensions: [ '*', '.js', '.jsx', '.json'],
modules:[__dirname, './app/js', 'node_modules'],
},
module: {
rules: [
{
test: /\.jsx?$/,
include: [
path.resolve(__dirname, "app")
],
loaders: ["babel-loader"],
},
{
test: /\.html$/,
loader: ["file-loader?name=[name].[ext]"],
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
include : path.join(__dirname, 'app'),
loader : 'url-loader?limit=30000&name=images/[name].[ext]'
}
],
},
}
The migration has broken multiple images but heres one and I can use is it as a base to fix the others:
import React, { Component } from 'react';
import { Link } from 'react-router';
import Logo from "logo.jpg";
export default class Menu extends Component {
render() {
return (
<div className='Menu' id='Menu'>
<img src={Logo}></img>
<Link to='/'>Home</Link> <Link to='/about'>Clothing</Link> <Link to='/Cart'>Cart</Link>
<hr />
</div>
);
}
}
Should I use url('logo.jpg')
? Why is the dev server not finding the images and displaying them?
EDIT
Tried with:
let img = new Image();
img.src = require('logo.jpg');
and <img src={img.src}>
, but it gives me the same error.
Your webpack configuration doesn't declare explicitly output.publicPath
setting. A basic configuration might be like:
output: {
publicPath: '/',
path: __dirname + "/dist",
filename: "[name].js"
},
Further consideration: since your logo.jpg
lives in the same directory as your component, why not importing it with a ./
relative path?
import Logo from "./logo.jpg";