L'utilisation d'images dans un composant vue

Question

J'essaie de convertir un composant Vue 2 en un composant autonome afin de pouvoir le réutiliser dans d'autres projets.

Après quelques difficultés avec webpack et POI J'ai réussi à faire fonctionner le composant. Cependant, les images que j'utilise dans le composant ne fonctionnent pas. Je veux que les images png ou svg soient converties en base64 en ligne. Je suppose que je dois travailler avec vue-loader et url-loader dans mon webpack.config.js mais j'ai besoin d'aide ici !

Dans mon fichier de composant vue, j'ai un modèle :

<img src="assets/search.png" />

Dans mon webpack.config.js je fais

 module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader',
        },
        {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            use: [
                'url-loader?name=assets/[name].[ext]',
                {
                    loader: 'url-loader',
                    options: {
                    }
                },
            ],
        }
    ]

},

Le src img n'est pas converti. Qu'est-ce qui ne va pas ?

Answer 1

J'ai un peu modifié les règles et j'ai réussi à faire fonctionner le système :

        rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader',
        },
        {
            test: /\.(png|jpg|jpeg|gif|svg)(\?.*)?$/,
            use: [
                'url-loader?name=assets/[name].[ext]',
            ]
        }
    ]