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]',
            ]
        }
    ]