What is the correct way to specify Webpack file-loader publicPath with such a file structure?

Question

Frontend

Structure :
_
_
_
_
_
_
_ │ ├───img │ ├───js │ └───index.html └───webpack.config.js index.html main.sass
<img src="img/exapmle.jpg" alt="exapmle">

.home
  background: url("../img/example.jpg")

webpack.config.js

module: {
    rules: [
      {
        test: /\.(jpg|png|svg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              publicPath: 'img',
              outputPath: 'img',
              useRelativePath: true
            }
          },
          {
            loader: 'image-webpack-loader',
           ...
            }
          }
        ]
      }
    ]
  },

On production in dist I see only a picture from html, if I change it to publicPath: '../', then I don't see it in css
Tried the solution

publicPath: function(url) {
    return url.replace(../, '/img/')
},