VUE: How to change generated image names?

i want to modify generated image names, but cant make it works. With this i have a error of type:

TypeError: Cannot set properties of undefined (setting ‘name’)

What i doing wrong?

vue.config.js

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  runtimeCompiler: true,
  assetsDir: "assets",
  css: {
    loaderOptions: {
      sass: {
        additionalData: `
          @import "@/modules/functions.scss";
          @import "@/modules/mixins.scss";
          @import "@/modules/variables.scss";
        `,
      },
      css: {
        modules: {
          localIdentName: "style-[hash:5]",
        },
      },
    },
  },
  chainWebpack: config => {
    config.module
    .rule('images')
    .test(/.(png|jpe?g|gif|webp)(?.*)?$/)
    .use('url-loader')
    .loader('file-loader')
    .tap(options => {
      options.name = 'img/[name].[ext]'
      return options
    })
  }
});