Cant find imgs:s when React.js project is bundled with webpack2 - .htaccess

Question

Everything works in development, all images are found. But when I bundle my the files and upload to webhost, product img:s can't be found and returns error:
This is my .htaccess:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
This is my webpack.config.prod.js file:
// PRODUCTION
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const entry = {
app: path.join(process.cwd(), 'src/app.js')
}
const output = {
path: path.join(__dirname, 'dist'),
filename: 'bundle.min.js',
}
const plugins = [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new webpack.optimize.UglifyJsPlugin({
mangle: false,
compress: {
warnings: false
}
}),
new ExtractTextPlugin('bundle.css'), // creation of HTML files to serve your webpack bundles
new HtmlWebpackPlugin({
template: 'index-template.html'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'bundle',
filename: '[name].common.js'
})
]
const config = {
context: path.join(__dirname, 'src'),
entry: entry,
output: output,
devtool: "source-map",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
include: path.join(__dirname, 'src'),
use: "babel-loader"
},
{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: { limit: 10000, name: './img/[name].[ext]' } // Convert images < 10k to base64 strings (all in img folder)
}]
},
{
test: /\.(sass|scss)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: (loader) => [ require('autoprefixer')() ]
}
},
'sass-loader',
]
})
}
]
},
plugins: plugins,
externals: {
jquery: 'jQuery'
}
}
module.exports = config;
Images are imported in my product product component under lifecycle event "componentDidMount":
import React, { Component } from 'react';
import Modal from 'react-modal';
import PropTypes from 'prop-types';
// Custom styles for Modal image
const customStyles = {
content : {
top : '50%',
left : '50%',
right : 'auto',
bottom : 'auto',
marginRight : '-50%',
transform : 'translate(-50%, -50%)',
background : 'rgba(0, 0, 0, 0.8)',
width : '100vw',
height : '100vh',
display : 'flex',
justifyContent : 'center',
alignItems : 'center'
}
};
class ProductItem extends Component {
constructor(props) {
super(props);
this.state = {
modalIsOpen: false,
image: '',
previewImg: ''
};
this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);
}
// Set state object "modalIsOpen" to true when click on <ProductItem/> component
openModal() {
this.setState({
modalIsOpen: true
});
}
// Set state object "modalIsOpen" to false when click on <Modal/> component
closeModal() {
this.setState({
modalIsOpen: false
});
}
render(){
// Create variables for all <ProductItem/> description options. If <PoductItem/> object has props or state, render it. Otherwise return null.
var img = this.state.image ?
<img src={this.state.image} /> :
null;
const name = this.props.product.stocked ?
<h3>{this.props.product.name}</h3> :
<h3><span style={{color: 'red'}}>
{this.props.product.name}
</span></h3>;
var limited = this.props.product.limited ?
<p>begränsad upplaga: {this.props.product.limited} ex</p> :
null;
var available = this.props.product.available ?
<p>tillgängliga: {this.props.product.available} ex</p> :
null;
var price = this.props.product.price ?
<p>{this.props.product.price} kr</p> :
null;
var type = this.props.product.type ?
<p>{this.props.product.type}</p> :
null;
var size = this.props.product.size ?
<p>{this.props.product.size} cm</p> :
null;
var desc = this.props.product.desc ?
<p>{this.props.product.desc}</p> :
null;
var modalName = this.props.product.name ?
<h2>{this.props.product.name}</h2> :
null;
var modalDesc = this.props.product.desc ?
<h2>{this.props.product.desc}</h2> :
null;
return (
<div className="product hvr-sink" onClick={this.openModal}>
<Modal
isOpen={this.state.modalIsOpen}
onRequestClose={this.closeModal}
style={customStyles}
contentLabel="Modal image"
>
<div className="modal-box" onClick={this.closeModal}>
<div className="close" onClick={this.closeModal}>x</div>
<img className="modal-img" src={this.state.previewImg}/>
{modalName}
{modalDesc}
</div>
</Modal>
{img}
{name}
{type}
{limited}
{available}
{size}
{price}
{desc}
</div>
);
};
// Import all thumbnail + previewImg images and then() put them into state. If rejection occures catch() returns rejection reasen (err).
componentDidMount() {
import(`./images/${this.props.product.thumbnail}`).then(
(image) => this.setState({
image: image
})
).catch((err) => {
console.log('error thumbnail' + err);
});
import(`./images/${this.props.product.previewImg}`).then(
(previewImg) => this.setState({
previewImg: previewImg
})
).catch((err) => {
console.log('error previewImg' + err);
});
}
};
// Components expected proptypes
ProductItem.propTypes = {
product: PropTypes.object.isRequired
}
export default ProductItem;
All this works in development environment, images render no problem. Also, my background image and other img work that are being inserted via SASS:
.background-img {
position: fixed;
background: url(../images/main.jpg) no-repeat center center scroll;
background-size: cover;
z-index: 0;
}
or via "import" as ex "magdaImg":

Answer 1

It turned out to be a problem with my project not being located in the root.