Question

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

Answer 1

您可以阅读有关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

Answer 2

只需使用“前置”插槽：

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

    <template v-slot:prepend>

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

    </template>

  </v-text-field>

如何添加SVG图像以验证文本字段

2 个答案: