bug记录-组件传入非法字符,导致页面不能正常显示。

25 阅读1分钟

组件传入非法字符,导致页面不能正常显示。

 <Icon v-if="item.meta.icon" :icon="item.meta.icon">{{ item.meta && item.meta.title }}</Icon>

Icon 组件内容如下

<template>
  <el-icon :size="20">
    <component :is="Icon" />
  </el-icon>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  icon: String,
  default: "",
});

const Icon = computed(() => props.icon);
</script>

<style lang="scss" scoped></style>

问题 :item.meta.icon 传入了值为 http://xxx/328322a1fdb4fa7463caaf4dfabe2e36.png 的这个字符串,导致不能正常显示页面。属于组件传入了非法字符,导致不能正常渲染。

InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('http://xxx/328322a1fdb4fa7463caaf4dfabe2e36.png') is not a valid name.

重要

一定不要忽略报错信息提示。