Javascript 如何从服务器加载SVG并以内联方式插入

目前，我使用的网页的这样，它与静态图标很好

但是现在我需要从HTTP服务器加载图标。当我尝试将图标的url写入向量的src时，它不起作用。我可以只使用

标记，但我需要更改填充颜色

如何从服务器加载图标并将其作为内嵌SVG插入？

使用his

在Vue中，它看起来像下面这样

假设后端返回以下SVG（注意

fill=“currentColor”

）：

您可以创建一个超级简单的SVG图像组件：

<template>
    <span v-html="content" />
</template>
<script>
export default {
    props: {
        src: {
            type: String,
            required: true,
        }
    },
    data() {
        return {content: ''};
    },
    watch: {
        src: {
            immediate: true,
            handler(src) {
                axios(src).then((response) => this.content = response.data);
            }
        }
    },
}
</script>

导出默认值{
道具：{
src:{
类型：字符串，
要求：正确，
}
},
数据（）{
返回{内容：'}；
},
观察：{
src:{
立即：是的，
处理程序（src）{
axios（src）.then（（response）=>this.content=response.data）；
}
}
},
}

然后在需要时使用它：

<template>
    <svg-img :src="svgSrc" />
</template>
<script>
import SvgImg from './components/SvgImg.vue';

export default {
    components: {
        SvgImg
    },
    data: {
        svgSrc: 'url/to/backend/times.svg',
    },
}
</script>

从“./components/SvgImg.vue”导入SvgImg；
导出默认值{
组成部分：{
SvgImg
},
数据：{
svgSrc:'url/to/backend/times.svg'，
},
}

@StephenThomas您链接到OP所说的内容是无效的。@EmileBergeron感谢您的编辑。你知道有什么可以帮我的吗？@Emilebergron他们一点都不一样。OP注意到网页包加载器不能通过http工作。这是绝对正确的，因为webpack发生在构建阶段，不涉及网络。codepin文章展示了如何通过AJAX加载SVG资产并将其注入DOM。这正是实现OP要求的方法。@StephenThomas你是对的，我的错。我只是看到了

后备部分，认为它不会起作用；）

<template>
    <svg-img :src="svgSrc" />
</template>
<script>
import SvgImg from './components/SvgImg.vue';

export default {
    components: {
        SvgImg
    },
    data: {
        svgSrc: 'url/to/backend/times.svg',
    },
}
</script>