在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: {
                    }
                },
            ],
        }
    ]

},

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

- Kirk Olson

---

路径必须相对于组件所在的位置。文件夹结构是什么？ - acdcjunior

我的组件是my-component.vue，位于src文件夹中。search.png图片在assets文件夹中。 - Kirk Olson

Answer 1

我稍微调整了规则，使其正常运作：

我稍微调整了规则，使其正常运作：

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

- Kirk Olson

---

谢谢，你解决了我的问题。但是你找到一种将图像作为文件而不是base64字符串加载到库中的方法吗？！ - Mahdi Aryayi