The use of images in a vue component

Question

I'm trying to convert a Vue 2 component to a standalone component so I can reuse it in other projects.

After some struggling with webpack and POI I managed to get the component working. However the images I use in the component don't work. I want the png or svg images converted to inline base64. I guess I need to work with vue-loader and url-loader in my webpack.config.js but I need some help here!

In my vue component file I have in the template:

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

In my webpack.config.js I do

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

},

The img src is not converted. What am I doing wrong?

The path must be relative to where the component is. What's the folder structure? — acdcjunior
- my-component - src - assets The my-component.vue is in src. The search.png is in assets. — Kirk Olson

Kirk Olson Kirk Olson · Accepted Answer · 2018-04-16T13:59:23

I tweaked the rules a little bit and got it working:

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

The use of images in a vue component

1 Answers