我在我的项目中使用类星体,我想使用我的svg图标与q切换,上面写着,它已经足够给出直接的路径,但我的svg图标没有出现。下面是我的代码示例。
template(lang="pug")
q-btn-toggle.my-custom-toggle(v-model="secondModel" color="white" text-color="primary" :options="toggleOption" size="sm")
数据
toggleOption: [
{ label: 'Table', value: 'table', slot: 'one', icon: require('@/assets/svg/toggle/Table.svg') },
{ label: 'Calendar', value: 'calendar', slot: 'two', icon: '@/assets/svg/toggle/Table.svg' }
],
secondModel: 'table'
发布于 2022-06-16 01:26:45
文档说明了有关指定自定义图标的如下内容:
icon : String
描述 选项按钮的图标;使用此道具和/或“标签”,但至少需要一个 示例
map
ion-add
img:https://cdn.quasar.dev/logo-v2/svg/logo.svg
img:path/to/some_image.png
指向图标图像的路径必须加上img:
。此外,类星体文档还讨论了在assets
这里中引用文件,并指出:
类星体提供了
assets
别名,因此建议您像这样使用它:<img src="~assets/logo.png">
。注意“资产”前面的~
。
将所有这些放在一起,您的选项定义可能应该如下所示:
[
{
label: 'Calendar',
value: 'calendar',
slot: 'two',
icon: 'img:~assets/svg/toggle/Table.svg'
},
. . .
]
下面是一个工作示例,它显示了一个自定义图标,该图标引用了URL:https://codepen.io/euphemism/pen/PoQLqRe?editors=101上的图像
https://stackoverflow.com/questions/72633968
复制相似问题