背景图像内的Vue调用组件

Question

我正在尝试在 vue2 中将组件称为背景图像。

我正在使用 vue-feather-icons-ssr，我可以这样称呼它：

<icon name="feather"></icon>

它将图标呈现为 SVG。

现在我想在 background-image 中渲染这个组件，但实际上我所有的方法都不起作用。

我希望它如何工作的示例（伪代码）：

<div :style="{background-image: url(<icon name="feather"></icon>)}">test</div>

Answer 1

您需要直接访问图标的 SVG，而不是通过组件。 假设您使用 webpack 和 npm，并且您的图标库包含 SVG 数据（即，它不会像 vue-awesome 那样将图像包装在 JS 文件中）：您可以将 SVG 文件的相对路径写入样式中，在在这种情况下，您不必绑定它（style 而不是:style）。