如何在Vue3+Nuxt中基于当前路由动态切换图片src属性

你的代码存在核心用法错误，包括computed属性误用、不必要的DOM操作、函数作用域问题，以下是修正后的完整实现：

原代码问题点 #

• computed属性用法错误：computed是返回计算值的纯函数，你在其中定义嵌套函数并递归调用，会触发无限循环，完全违背其设计初衷。
• 错误的DOM操作方式：Vue采用数据驱动视图模式，无需手动调用setAttribute修改DOM，直接通过响应式数据绑定即可实现视图更新。
• 函数作用域错误：changeImg函数定义在computed内部，onMounted中无法访问该函数，会导致调用报错。
• 路径解析问题：Nuxt3中引用assets资源，直接使用~/assets/xxx即可被框架自动解析。

修正后的代码 #

Script Setup 部分 #

<script setup>
import { computed, reactive } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

// 定义图片配置
const properties = reactive({
  home: '~/assets/img/fire-hor.gif',
  alt: 'Logo do Barnabé',
  banda: '~/assets/img/bonfire.gif',
});

// 根据当前路由返回对应图片路径
const currentLogo = computed(() => {
  switch (route.path) {
    case '/':
      return properties.home;
    case '/banda':
      return properties.banda;
    // 路由不匹配时的默认图片
    default:
      return properties.home;
  }
});
</script>

Template 部分 #

<template>
  <div class="barna-logo">
    <img :src="currentLogo" :alt="properties.alt" />
  </div>
</template>

关键说明 #

1. computed的正确使用：currentLogo会自动响应route.path的变化，路由切换时会重新计算返回对应图片路径，模板自动更新src属性，无需手动调用函数。
2. 移除冗余DOM操作：放弃对imagem ref的使用，完全通过数据绑定实现视图更新，符合Vue响应式理念。
3. 无需onMounted：computed属性会在组件初始化时自动执行一次，不需要额外在onMounted中调用逻辑。
4. 扩展性：后续新增路由对应的图片，只需在switch语句中添加新case即可。

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