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

在vue组件中使用图像

1 个答案: