我创建了一个vuejs库,其中包含一些可以在许多项目中使用的组件。 在该库中,我有一个组件可以加载要在html(svg-icon)中内联使用的svg文件。
效果很好。
但是在同一个库中,我还有另一个组件,该组件使用svg-icon以及存储在库中的svg图像。
导入点,我想将此库(节点模块)与npm链接一起使用
哪种方法可以提供svg图像的路径,或将其存储在哪里?
我尝试了许多不同的路径,但是没有一个起作用...
这是我的svg-icon组件:
<template>
<component :is="component"></component>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
icon: {
type: String,
required: true
}
},
data () {
return {
component: null
}
},
watch: {
icon: () => {
this.load()
}
},
computed: {
loader () {
return () => import(this.icon)
}
},
methods: {
load () {
this.loader().then(() => {
this.component = () => this.loader()
})
}
},
mounted () {
this.load()
}
}
</script>
这是使用svg-icon的组件(svg图像实际上位于同一文件夹中):
<template>
<svg-icon icon="~my-module/components/media/no-image.svg"></svg-icon>
<svg-icon icon="./no-image.svg"></svg-icon>
</template>
<script>
import SvgIcon from '../svg-icon/SvgIcon'
export default {
components: {
SvgIcon
}
}
</script>
我总是遇到这个错误:
Cannot find module '~my-module/components/media/no-image.svg'
Cannot find module './no-image.svg'
在这种情况下,哪条路是好的?还是应该将svg文件放在其他位置? (我想把它保存在图书馆里)
答案 0 :(得分:0)
我已经创建了一个CodeSandbox here
SvgIcon.vue
<template>
<span v-html="icon"></span>
</template>
<script>
export default {
name: "SvgIcon",
props: {
icon: {
type: String,
required: true
}
}
};
</script>
HelloWorld.vue
//Usage
<template>
<svg-icon :icon="AlertIcon"></svg-icon>
</template>
<script>
import AlertIcon from "../assets/alert.svg";
import SvgIcon from "./SvgIcon";
export default {
data() {
return { AlertIcon };
},
components: {
SvgIcon
}
};
</script>
我对您的组件进行了一些更改。
SvgIcon
代码中删除了一些不必要的字段。希望这会有所帮助。