webpack - vue组件中图片的使用

Question

我正在尝试将 Vue 2 组件转换为独立组件，以便我可以在其他项目中重用它。

在与 webpack 和 POI 斗争之后我设法让组件工作。但是我在组件中使用的图像不起作用。我想将 png 或 svg 图像转换为内联 base64。我想我需要在我的 webpack.config.js 中使用 vue-loader 和 url-loader，但我在这里需要一些帮助!

在我的模板中的 vue 组件文件中:

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

在我的 webpack.config.js 中我这样做

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

},

img src 没有被转换。我做错了什么？

Answer 1

我稍微调整了规则并使其生效:

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