Vue.js как работать с изображениями?

Изучаю VUE.js, возник вопрос относительно работы с изображениями.

Изучал доку: https://cli.vuejs.org/guide/html-and-static-assets.html#interpolation все очень интересно, но ничего не понятно.

Попробую описать проблему.
У меня есть папка public, в которую собираются ресурсы и соответственно папка assets.

В папке assets есть папка img, собственно в моих стилях и шаблоне нужно подключать изображения из этой папки. Для scss будет работать конструкция ~@, тогда изображения будут компилироваться в папку /public/img, но при этом эта же конструкция не будет работать для моего html шаблона.

Про шаблон, я имею ввиду:

    const pages = {
        app: {
            entry: './src/client.js',
            template: './src/assets/template/client.html',
            filename: 'index.html',
            title: 'Test -------- ',
            chunks: ['chunk-vendors', 'chunk-common', 'app'],
        },
    };

Кстати в случае с ~@, не сохраняется вложенность папок внутри img.

public удаляется при каждом билде. В общем ничего лучше, чем копировать img из assets в public придумать не получилось:

    configureWebpack: {
        plugins: [
            new CopyPlugin([
                    { from: "./src/assets/img", to: "./assets/img" },
                ],
            ),
        ]
    },

В общем откуда такие сложности с простым кейсом? Возможно я не так понял доку, подскажите, как правильно работать со статическими изображениями?