Vue组件挂载后img src未正确设置问题求助

问题根源很明确：你在所有ExpertCard组件的img标签里用了相同的id="myimg"，但DOM里的id必须是唯一的。当多个组件执行document.getElementById('myimg')时，只会找到DOM中的某一个img元素（每次刷新可能找到不同的），导致所有请求回来的URL都覆盖到同一个img上，最终只有一个图片显示，还随机变化。

正确的做法是用Vue的响应式数据管理图片链接，完全避免直接操作DOM，代码修改如下：

修改ExpertCard组件的脚本部分 #

import { ref, onMounted } from 'vue';
import { getStorage, ref as storageRef, getDownloadURL } from 'firebase/storage';

export default {
  props: ['Expert'],
  setup(props) {
    const imgUrl = ref(''); // 定义响应式变量存储图片URL

    onMounted(async () => {
      const storage = getStorage();
      // 避免和Vue的ref重名，改用storageRef
      const imgRef = storageRef(storage, props.Expert.profile_picture);
      try {
        const url = await getDownloadURL(imgRef);
        imgUrl.value = url; // 直接赋值给响应式变量
      } catch (error) {
        // 可添加错误处理，比如设置默认图片
        imgUrl.value = '/path/to/default-avatar.png';
      }
    });

    return { imgUrl };
  }
}

修改ExpertCard组件的模板部分 #

去掉重复的id，用v-bind绑定src到响应式变量：

<img :src="imgUrl" class="mx-auto rounded w-24 h-24" alt="专家头像">

补充说明 #

Vue是数据驱动视图的框架，直接操作DOM不仅容易引发这类重复id的问题，还会绕开Vue的响应式系统，导致视图和数据不同步。用响应式变量绑定src的方式，每个组件都会维护自己的imgUrl，自然能对应到正确的图片。

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