cannot load png files with webpack, unexpected character
Try to Restart the packager it fix it for me.
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>
);}}
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).