如何将 SVG 图像添加到 vuetify 文本字段

Posted 2023-02-23

【中文标题】如何将 SVG 图像添加到 vuetify 文本字段

【英文标题】：How to add SVG image to vuetify text field

【发布时间】：2019-04-12 16:40:19

【问题描述】：

我正在使用 vuetify 并想在文本字段的开头添加一个 SVG 图标。我知道您可以在 v-icon 中添加或添加图标，但我想以类似的方式使用我自己的 SVG 图像。

【问题讨论】：

阅读有关 custom icons 的文档。

【参考方案1】：

只需使用“前置”槽：

<v-text-field label="My text field" type="text">

    <template v-slot:prepend>

      <img   src="[PathToAssets]/whatever.svg" >

    </template>

  </v-text-field>

【参考方案2】：

您可以阅读public path

我强烈建议使用公共路径：

将您的 svg 图片添加到 public/img/icons/test.svg。

使用像 <img src="/img/icons/test.svg"> 这样的 img 标签指向 svg 位置。

如果你真的不想为你的 svg 使用公共路径，你可以使用这个加载器来导入你的 svg：https://github.com/visualfanatic/vue-svg-loader