PHP Laravel+Vue3+Inertia条件渲染SVG绑定报错问题排查

报错原因 #

这个错误源于条件渲染时<object>标签加载SVG的时机问题：

• SVG是矢量图，<object>加载时会创建内部DOM文档，浏览器或相关处理库（报错里的classifier.js）会尝试解析SVG内容中的动画等属性；
• 当v-if条件满足时，Vue刚挂载<object>标签，SVG资源还未完全加载完成，此时相关脚本尝试访问一个未初始化的对象（undefined）来查找animation属性，触发TypeError；
• PNG是位图，加载逻辑简单，不会触发这类内部DOM解析操作，因此没有报错。

解决方法 #

方法1：改用<img>标签加载SVG #

<img>加载SVG的逻辑更简单，不会创建内部文档，能避免这类DOM解析报错，同时功能不受影响：

<template>
    <section v-show="isDisplayed[index]">
        <section v-if="isMounted && isDisplayed[index]">
            <h3>headertext</h3>
            <img :src="a" alt="SVG A" />
            <img :src="b" alt="SVG B" />
        </section>
    </section>
</template>

方法2：明确指定<object>的类型并确保资源URL正确 #

1. 给<object>添加type="image/svg+xml"属性，帮助浏览器正确识别SVG类型：

<object :data="a" type="image/svg+xml" />
<object :data="b" type="image/svg+xml" />

2. 强制vite以URL形式导入SVG，避免导入格式异常：

// 修改导入语句，添加?url后缀
import a from '../../images/a.svg?url';
import b from '../../images/b.svg?url';

方法3：延迟渲染<object>直到SVG加载完成 #

通过监听<object>的load事件，确保SVG加载完成后再渲染，避免未初始化的访问：

<script setup>
// ... 其他导入
const svgLoaded = ref({ a: false, b: false });

const handleSvgLoad = (key) => {
    svgLoaded.value[key] = true;
};
</script>

<template>
    <section v-show="isDisplayed[index]">
        <section v-if="isMounted && isDisplayed[index]">
            <h3>headertext</h3>
            <object 
                :data="a" 
                type="image/svg+xml"
                @load="handleSvgLoad('a')"
                v-if="svgLoaded.a"
            />
            <object 
                :data="b" 
                type="image/svg+xml"
                @load="handleSvgLoad('b')"
                v-if="svgLoaded.b"
            />
        </section>
    </section>
</template>

内容的提问来源于stack exchange，提问作者Jeff