webpack 4 - fileloader not working

Question

[webpack.config.js]

test: /\.(png|jpg|jpeg|gif)$/,
use: [
    {
        loader: 'file-loader',
        options: {
            name: 'img/[name].[hash:10].[ext]',
        }
    }
]

[in frontend code(MainPage.jsx)]

let imgURL = require('../../../assets/mars.png')    
console.log(imgURL)
<CardMedia
    className={classes.media}
    image={imgURL}
    title="Contemplative Reptile"
/>
// <CardMedia> is material-ui component

log :

img/mars.ed66029dc3.png
Failed to load resource: net::ERR_FILE_NOT_FOUND   mars.ed66029dc3.png

mouse hover message mars.ed66029dc3.png:
D:/projectname/build/html/img/mars.ed66029dc3.png
I need output is D:/projectname/build/img/mars.ed66029dc3.png

[project structure]

build
  - html
    index.html (electron entrance)
  - img
    mars.ed66029dc3.png (file-loader copy)
  bundle.js (webpack output file, call by index.html)
src
  - assets
    mars.png
  - core
  - render
    - html
      index.html
    - js
      - components
        MainPage.jsx

How can it fix it? use publicPath not working too,
And I don't know how to unify all path,
in html - I use electron protocol
in jsx - import & require I use webpack alias
in jsx img - I use file-loader ....

please help, thanks