Vue实现点击头像弹出CEO信息弹窗及图片渲染问题求解

现存问题说明 #

• 弹窗逻辑使用原生DOM操作修改内容、控制显隐，不符合Vue数据驱动规范，点击头像无法正确加载对应创始人信息
• v-for动态绑定本地assets目录下的头像时，路径未被构建工具解析，导致图片加载失败

修复方案 #

1. 替换原生DOM逻辑为响应式实现 #

核心修改点：

• 新增响应式变量控制弹窗状态、存储当前选中的创始人数据，完全移除innerHTML、手动修改style.display的原生操作
• 删除弹窗内容区多余的v-for循环，直接绑定当前选中的创始人字段渲染内容

修复后script对应逻辑：

<script>
import '../../assets/style.css'
export default {
  data(){
    return{
      // 控制弹窗显隐
      modalVisible: false,
      // 当前选中的创始人信息
      activeCeo: {},
      ceos: [
        {
          name_ceo:"Mr. A",
          position_ceo:"CEO-GOSTREAM",
          content:"Lorem.",
          avatar: require('../../assets/Profile1.png')
        },
        {
          name_ceo:"Mr. B",
          position_ceo:"CTO-GOSTREAM",
          content:"Lorem2.",
          avatar: require('../../assets/Profile2.png')
        },
        {
          name_ceo:"Mr. C",
          position_ceo:"CGO-GOSTREAM",
          content:"Lorem3.",
          avatar: require('../../assets/Profile3.png')
        }
      ]
    }
  },
  methods:{
    modalCeo(i){
      // 赋值当前选中的创始人
      this.activeCeo = this.ceos[i]
      // 打开弹窗
      this.modalVisible = true
    },
    closemodal(){
      // 关闭弹窗
      this.modalVisible = false
    }
  }
}
</script>

修复后template对应逻辑：

<template>
  <div class="ceo">
    <!-- 弹窗显隐直接绑定modalVisible，用v-show控制 -->
    <div v-show="modalVisible" class="ceo-popup">
      <div class="modal-content-ceo">
        <div class="btn-close-popup">
          <img src="../../assets/close.svg" type="button" @click="closemodal()">
        </div>
        <!-- 移除多余v-for，直接渲染activeCeo内容 -->
        <div class="content-main">
          <h3 id="name">{{ activeCeo.name_ceo }}</h3>
          <h5 id="position">{{ activeCeo.position_ceo }}</h5>
          <h6 id="intro-ceo">{{ activeCeo.content }}</h6>
        </div>
        <img class="buiding-popup" src="../../assets/Group 226.png" alt="">
      </div>
    </div>
    <div class="title">
      <h5>Đội ngũ GoStream</h5>
      <h2>Co-Founders</h2>
    </div>
    <div class="avatar-buiding">
      <img class="buiding" src="../../assets/building-0122.png" alt="">
      <!-- 直接遍历ceos数组渲染头像，不需要单独维护images数组 -->
      <div class="avatar">
        <img 
          v-for="(item, index) in ceos" 
          :key="index"
          :src="item.avatar" 
          @click="modalCeo(index)"
        >
      </div>
    </div>
  </div>
</template>

2. 本地assets图片动态加载适配 #

如果是Vite构建的项目，不支持require()语法，替换头像路径写法为：

// vite环境下头像路径写法
ceos: [
  {
    name_ceo:"Mr. A",
    position_ceo:"CEO-GOSTREAM",
    content:"Lorem.",
    avatar: new URL('../../assets/Profile1.png', import.meta.url).href
  },
  // 其余两个头像按相同规则替换路径即可
]

原理：动态绑定src时，写在数组里的纯字符串相对路径不会被构建工具解析，必须通过require()（webpack环境）或new URL()（vite环境）显式引入资源，才能被构建工具正确处理，匹配打包后的资源路径。

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