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

Question

[nepster-web]

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

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

Попробую описать проблему.
У меня есть папка 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" },
                ],
            ),
        ]
    },

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

Answer 1

[Aetae]

Предполагается что html особо не динамичен. По сути вся фишка в обаботки динамических импортов файлов зависит от соответствующих webpack loader'ов. SCSS loader для каждого url вида ~@path вызывает(условно) require(path) и делает соответствующую магию(обычно это для мелких файлов: url-loader, который инлайнит файл как data: URI, для крупных: file-loader, который копирует файлы в соответствующую расширению папочку и добавляет к имени хэш). HTMLWebpackLoader не трогает подключаемые ресурсы, в т.ч. картинки. Просто юзайте картинки в том же scss, а внутри html назначайте соответствующее классы. Или кладите нужны для html картинки сразу в public, да.