Vue.js how to work with images in assets?

Question

Vue.js

I'm learning VUE.js, I have a question about working with images.

I studied the doc: https://cli.vuejs.org/guide/html-and-static-assets...
everything is very interesting, but nothing is clear.

I'll try to describe the problem.
I have a public folder where resources are collected and, accordingly, an assets folder .



There is an img folder in the assets folder , in fact, in my styles and template, I need to include images from this folder. For scss, the [email protected] construction will work , then the images will be compiled into the /public/img folder , but the same construction will not work for my html template.

About the template, I mean:

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

By the way, in the case of [email protected] , nesting of folders inside img is not preserved .

public is removed on every build.
In general, nothing better than copying img from assets to public could not be invented:

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

In general, why such difficulties with a simple case? Perhaps I misunderstood the dock, tell me how to work with static images correctly?

Answer 1

It is assumed that html is not particularly dynamic. In fact, the whole trick in processing dynamic file imports depends on the corresponding webpack loaders. SCSS loader for each [email protected] url calls (conditionally) require(path) and does the appropriate magic (usually for small files: url-loader, which inline the file as data: URI, for large ones: file-loader, which copies files to the folder corresponding to the extension and adds a hash to the name). HTMLWebpackLoader does not touch included resources, incl. Pictures. Just use the pictures in the same scss, and assign the appropriate classes inside the html. Or put the images you need for html immediately in public, yes.