如何在Nuxt应用程序中包括内联.svg

Question

我想做一个普通的事情-在Vue Nuxt应用程序中动态包含一个svg HTML，我将对其进行样式设置。为此，我创建了一个组件，但是得到了文本data：image / svg + xhtml ...。而不是图像。

如何使其工作？

<template>
   <div v-html="src"></div>
</template>
<script>
export default {
    name: 'Icon',
    props: {
        name: {
            type: String,
            required: true
        }
    },
    computed: {
        src() {
            const src = require(`assets/icons/${this.name}.svg`)
            return src
        }
    }
}
</script>

我想做一个普通的事情-在Vue Nuxt应用程序中动态包含一个svg HTML，我将对其进行样式设置。为此，我创建了一个组件，但没有图像，而是获得了文本数据：image / svg + ...

Answer 1

这并不容易，我尝试了一堆不同的解决方案，这些解决方案似乎可以正常工作。”>

[我的理解是，Webpack如何处理“图像”资产并以内联方式还是独立方式使用它们来定义定义。

Answer 2

@nuxtjs/svg似乎可以完成您想做的事情。安装后，请尝试：