cannot load png files with webpack, unexpected character

Question

Im trying to reconfigure my webpack, and now i cannot load the css files. i keep my styles in src > styles > main.css

I am getting errors such as

ERROR in ./src/images/NavIcon03.png Module build failed: SyntaxError: /Users/myname/work/site/src/images/NavIcon03.png: Unexpected character '�' (1:0)  

Here is my webpack configuration

var webpack = require('webpack')   module.exports = {   entry: [     './src/main.js'   ],   output: {     path: __dirname,     publicPath: '/',     filename: 'bundle.js'   },   module: {     loaders: [{       exclude: /node_modules/,       loader: 'babel'     },         {           test: /\.css$/, // Only .css files           loader: 'style!css' // Run both loaders         }]   },   resolve: {     extensions: ['', '.js', '.jsx']   },   devServer: {     contentBase: './'   } }; 

Below is the package.json

{   "name": "website",   "version": "0.0.1",   "dependencies": {     "ampersand-app": "^1.0.4",     "ampersand-model": "^5.0.3",     "ampersand-react-mixin": "^0.1.3",     "ampersand-rest-collection": "^4.0.0",     "ampersand-router": "^3.0.2",     "asynquence": "^0.8.2",     "autoprefixer": "^5.2.0",     "autoprefixer-core": "^5.2.0",     "autoprefixer-stylus": "^0.7.0",     "axios": "^0.9.1",     "babel": "^5.5.8",     "babel-core": "^5.5.8",     "babel-loader": "^5.1.4",     "bootstrap": "^3.3.6",     "bootstrap-webpack": "0.0.5",     "css-loader": "^0.15.1",     "d3": "^3.5.12",     "file-loader": "^0.8.4",     "font-awesome": "^4.5.0",     "google-map-react": "^0.9.3",     "history": "^1.17.0",     "hjs-webpack": "^2.6.0",     "json-loader": "^0.5.2",     "local-links": "^1.4.0",     "lodash": "^4.3.0",     "lodash.assign": "^3.2.0",     "lodash.has": "^3.2.1",     "lodash.merge": "^3.3.1",     "lodash.pick": "^3.1.0",     "lodash.result": "^3.1.2",     "milliseconds": "^1.0.3",     "moment": "^2.11.1",     "node-libs-browser": "^0.5.2",     "object-assign": "^4.0.1",     "octicons": "^2.2.0",     "postcss-loader": "^0.5.0",     "qs": "^3.1.0",     "react": "^0.14.6",     "react-avatar-editor": "^3.2.0",     "react-bootstrap": "*",     "react-bootstrap-table": "^1.3.3",     "react-bootstrap-validation": "^0.1.11",     "react-cropper": "^0.6.0",     "react-d3-components": "^0.6.0",     "react-dom": "^0.14.6",     "react-dropzone": "^3.3.0",     "react-dropzone-component": "^0.8.1",     "react-facebook-login": "^2.0.3",     "react-fileupload": "^1.1.3",     "react-google-maps": "^4.7.1",     "react-hot-loader": "^1.3.0",     "react-input-slider": "^1.5.0",     "react-redux": "^4.4.0",     "react-router": "^2.0.0",     "react-select": "^1.0.0-beta8",     "react-star-rating-component": "^0.1.0",     "redux": "^3.3.1",     "redux-promise": "^0.5.1",     "slugger": "^1.0.0",     "standard": "^4.3.1",     "style-loader": "^0.12.3",     "stylus-loader": "^1.2.1",     "surge": "^0.14.2",     "url-loader": "^0.5.6",     "webpack": "^1.9.11",     "webpack-dev-server": "^1.9.0",     "xhr": "^2.0.2",     "yeticss": "^6.0.7"   },   "license": "",   "private": true,   "scripts": {     "build": "webpack",     "deploy": "surge -p public -d labelr.surge.sh",     "start": "webpack-dev-server",     "yolo": "git add --all && git commit -am \"$(date)\" && npm version minor && git push origin master --tags && npm run build && npm run deploy"   },   "devDependencies": {     "babel-preset-react": "^6.5.0",     "css-loader": "^0.15.6",     "redux-devtools": "^3.1.1",     "style-loader": "^0.12.4"   } } 

Answer 1

You are missing an appropriate loader that would match that png of yours. To fix this, set up either url-loader or file-loader so that it matches your png.

url-loader has a limit option you may find useful. It allows you to control whether or not it emits dataurls (inline) or paths (uses file-loader and emits files matching to paths).

Answer 2

You can use image-webpack-loader with file-loader https://www.davidmeents.com/blog/how-to-set-up-webpack-image-loader/

1) install them

$npm install image-webpack-loader file-loader --save-dev

2) add to webpack.config.js below babel-loader your new set: image-webpack-loaders and file-loader

module: {     loaders: [       {         test: /\.jsx?$/,         exclude: /(node_modules|bower_components)/,         loader: 'babel-loader',         query: {           presets: ['react', 'es2015', 'stage-0'],           plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],         }       },        {         test: /\.(jpe?g|png|gif|svg)$/i,         loaders: [           'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',           'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'         ]       }      ]   }, 

3) Import your .jpg file into variable (for me it is 'imgabout' variable) and add this variable into src

import React from 'react'; import imgabout from './img-about.jpg'; export default class Article extends React.Component { render() {      const { title } = this.props;       return (       <div class="col-md-6">           <img class="img-about" src={imgabout} alt="Logo" />       </div>      );}}