[Vuejs]-Access to dynamic Images with vue and playframework

I tried a lot of things and i followed this steps:

https://blog.lichter.io/posts/dynamic-images-vue-nuxt/

As i told you above, i am uploading my images at the moment to the assets folder in UI. If i am in dev mode i can upload new images and show them with following code:

<img :src="require(`../../assets/${img.imgUrl}`)" >

And this works now. But when i change in production mode with:

1. npm run build
2. sbt compile stage
3. sbt start

The Frontend App will be a static app in the folder public/ui/

and then i don´t know the right relative path for the new images…

vue.config.js:

const path = require("path");

const webpack = require('webpack')

module.exports = {
outputDir: path.resolve(__dirname, "../public/ui"),
assetsDir: process.env.NODE_ENV === 'production' ? 'static':'',

devServer: {
    public: 'localhost:8080',
    headers: {
        'Access-Control-Allow-Origin': '*',
    }
},

configureWebpack: {
    plugins: [
        new webpack.DefinePlugin({
            'process.conf': {
                'RECAPTCHA_SITEKEY': JSON.stringify(process.env.RECAPTCHA_SITEKEY)
            }
        })
    ]
},

chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.transformAssetUrls = {
          img: 'src',
          image: 'xlink:href',
          'b-avatar': 'src',
          'b-img': 'src',
          'b-img-lazy': ['src', 'blank-src'],
          'b-card': 'img-src',
          'b-card-img': 'src',
          'b-card-img-lazy': ['src', 'blank-src'],
          'b-carousel-slide': 'img-src',
          'b-embed': 'src'
        }

        return options
      })
      
  }

}

In which folder do i have upload the images? How can i reach the new uploaded images in production mode?