Vue JS按钮点击正常但动态插入的图片无法显示的问题

你直接用innerHTML插入的HTML里的Vue指令（:src）不会被Vue编译处理。Vue只会在初始化挂载时解析#app内的模板代码，之后手动通过DOM API插入的HTML不会经过Vue的编译器，所以:src="baby[2].image"不会被解析成实际的图片URL，浏览器会把这个字符串当成图片地址，自然加载失败。

方案一：用Vue响应式状态控制视图（推荐，符合Vue数据驱动理念） #

不要手动操作innerHTML，而是通过响应式变量控制内容的显示/隐藏：

修改JS代码：

const app = Vue.createApp({
  data() {
    return {
      baby: [
        {
          id: "botamon",
          name: "Botamon",
          stage: "Baby",
          type: "Data",
          digivolution: ["Koromon"],
          image: "https://www.grindosaur.com/img/games/digimon-world/digimon/12-botamon.jpg"
        },
        {
          id: "poyomon",
          name: "Poyomon",
          stage: "Baby",
          type: "Data",
          digivolution: ["tokomon"],
          image: "https://www.grindosaur.com/img/games/digimon-world/digimon/86-poyomon.jpg"
        },
        {
          id: "punimon",
          name: "Punimon",
          stage: "Baby",
          type: "Data",
          digivolution: ["tsunomon"],
          image: "https://www.grindosaur.com/img/games/digimon-world/digimon/88-punimon.jpg"
        },
        {
          id: "yuramon",
          name: "Yuramon",
          stage: "Baby",
          type: "Data",
          digivolution: ["tanemon"],
          image: "https://www.grindosaur.com/img/games/digimon-world/digimon/123-yuramon.jpg"
        },
      ],
      showPunimon: false // 新增响应式变量控制显示
    }
  },
  methods: {
    blueEgg() {
      this.showPunimon = true; // 点击后切换状态
    },
  },
})
app.mount('#app')

修改HTML代码，在.container里添加条件渲染的内容：

<div id="app">
  <div class="container-fluid">
    <div class="hero-image">
      <p class="display-5" id="choice">Which egg do you want?</p>
      <img src="../Images/hero-image.png" alt="" />
    </div>
    <div class="egg-choice">
      <img @click="blueEgg" src="/Images/Blue Egg - mobile.png" alt="Blue Egg" />
      <img src="/Images/Green Egg - mobile.png" alt="Green Egg" />
      <img src="/Images/Orange Egg - mobile.png" alt="Orange Egg" />
      <img src="/Images/Pink Egg - mobile.png" alt="Pink Egg" />
    </div>
  </div>
  <div class="container">
    <!-- 用v-if控制显示 -->
    <div id="background" v-if="showPunimon">
      <div class="heading">
        <h1>In-training Stage</h1>
        <button class="close" @click="showPunimon = false">X</button>
      </div>
      <div class="punimon-image">
        <img :src="baby[2].image" alt="" />
      </div>
    </div>
  </div>
</div>
<script src="https://unpkg.com/vue@next"></script>

方案二：直接拼接图片URL到HTML字符串（不推荐，适合简单场景） #

如果非要用innerHTML，直接把响应式数据里的URL拼进去，不用Vue指令：

修改blueEgg方法：

blueEgg() {
  let container = document.querySelector(".container");
  container.innerHTML = `<div id="background">
        <div class="heading">
        <h1>In-training Stage</h1>
        <button class="close">X</button>
        </div>
        <div class="punimon-image">
        <img src="${this.baby[2].image}" alt="" />
      </div>
    </div>
        `
},

Vue的核心是数据驱动视图，尽量避免直接操作DOM（比如innerHTML、querySelector这类原生DOM操作），用响应式数据来控制视图变化，既能避免这类编译问题，也能让代码更符合Vue的设计理念，更容易维护。

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