Vue.js 3添加@click后图片无法加载的问题求助

问题根源 #

你在当前组件的<script setup>里导入了App.vue，这会造成循环引用（根组件App.vue必然会引入当前组件），引发Vue渲染异常——添加@click指令后触发了这个异常，最终导致图片无法显示。另外，图片路径写法也存在优化空间，可避免不同环境下的路径解析问题。

解决步骤 #

1. 移除冗余导入
   删除<script setup>中这行完全不必要的代码：

   import App from '../App.vue';
   

   组件无需导入根组件App.vue，该操作只会引发循环引用错误。

2. 正确添加点击事件
   根据需求选择对应写法：

   • 要执行函数同时保留跳转功能：

     <a href="/" @click="handleLogo">
       <img src="@/assets/imgs/logo.png" alt="网站logo" width="10%" class="aerologo">
     </a>
     

     注意：如果是hash路由，页面会刷新，console.log内容可能一闪而过；若使用history路由则不会刷新。
   • 只执行函数、不跳转：

     <a href="#" @click.prevent="handleLogo">
       <img src="@/assets/imgs/logo.png" alt="网站logo" width="10%" class="aerologo">
     </a>
     

     用.prevent修饰符阻止a标签的默认跳转行为。

3. 优化图片路径
   Vue中推荐用@别名指向src目录，将图片路径改为@/assets/imgs/logo.png，比绝对路径/src/assets/imgs/logo.png更可靠，避免环境差异导致的路径解析失败。

修复后的完整代码示例 #

<script setup>
import router from '../router/index.js'
import { ref, onMounted } from 'vue'

onMounted(() => {
    console.log('mounted!')
    window.scrollTo(0, 0)
})

const handleLogo = () => {
    console.log("clicked on logo!")
}
</script>

<template>
    <header class="d-flex justify-content-center mt-3 text-center" >
        <div class="img-aerobot">
            <a href="/" @click="handleLogo">
                <img src="@/assets/imgs/logo.png" alt="网站logo" width="10%" class="aerologo">
            </a>
        </div>
    </header>
    <!-- 其他模板内容 -->
</template>

内容的提问来源于stack exchange，提问作者Federico Perez Diduch