Question

我创建了一个应该显示字体图标的组件：

<template>
    <Image :src.decode="code" />
</template>

<script>
    const mapping = {wi_owm_200:"&#xf01e;",wi_owm_201:"&#xf01e;",wi_owm_202:"&#xf01e;"};
    
    export default {
        props: {
            icon: String,
        },
        data() {
            return {
                code: String,
            };
        },
        created() {
            this.code = 'font://' + mapping[this.icon];
        }
    };
</script>

在我的主页中，我有这段代码调用我的组件：

<template>
    <page>
        <StackLayout>
            <myComponent icon="wi_owm_200" />
        </StackLayout>
    </page>
</template>

<script>
import myComponent from "./myComponent";

export default {
    components: {
        myComponent
    }
}
</script>

当我编译时，我会得到代码“”而不是我漂亮的图标... 同时，直接在我的主页中，这将完美解决：

<Image src.decode="font://&#xe900;" />

Here is the playground, if you want to check it live

有什么想法可以让我的组件正常工作吗？

Answer 1

对于 Button 动态我使用 :text="code"（而不是 text.decode="& #xf164;"），其中

code = String.fromCharCode(0xf164);

尝试图像！

Nativescript vue：动态设置图片src.decode显示字体图标

1 个答案: