Vue JS中如何通过对象内链接展示图片（JSON转换后仅显字符串）

一、如何通过链接加载并展示图片 #

你当前在模板里用{{baby[2].image}}只是把图片URL作为纯文本输出，要展示图片需要使用HTML的<img>标签，并通过Vue的属性绑定把URL赋值给src属性：

<!-- 替换原来的<div class="image">{{baby[2].image}}</div> -->
<img :src="baby[2].image" :alt="baby[2].name" class="image">

• :src是Vue的动态属性绑定语法（等同于v-bind:src），会把Vue实例中的baby[2].image值作为图片的地址。
• 加上:alt属性可以提升可访问性，用数码宝贝的名称作为替代文本。

二、JSON转换环节的问题 #

你的代码里blueEgg方法存在明显疏漏：

1. 未定义变量引用：方法里使用了intraining变量，但你的Vue实例data中只有baby数组，这个变量不存在，会直接抛出引用错误。
2. 冗余的JSON转换：JSON.parse(JSON.stringify(intraining[0].image))完全没必要执行——image本身就是字符串类型的URL，转成JSON再解析回来结果和原字符串完全一致，既浪费性能又无实际作用。
3. 方法未被调用：这个方法定义后没有在模板或其他逻辑中触发，根本不会执行。

如果你的需求是从JSON字符串还原数据（比如从后端接口获取JSON），正确的做法是直接解析整个数据数组，而不是单独解析某个URL：

// 示例：假设从后端拿到JSON字符串
const babyJson = '[{"id":"botamon","name":"Botamon",...}]';
// 解析后赋值给data中的baby
this.baby = JSON.parse(babyJson);

修正后的完整代码 #

JavaScript #

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"
        },
      ],
    }
  },
  // 去掉无用的blueEgg方法，或者根据实际需求重构
})
app.mount('#app')

HTML #

<div id="app">
  <div class="container" id="yellow-background">
    <h1>In-training Stage</h1>
    <img :src="baby[2].image" :alt="baby[2].name" class="image">
  </div>
</div>
<script src="https://unpkg.com/vue@next"></script>

CSS（保持不变） #

:root {
  --white-color: #ffffff;
  --baby-yellow: #FFF141;
  --training-blue: #19E0FA;
  --rookie-gold: #AD9B11;
  --champion-pink: #FA198C;
  --ultimate-violet: #AD095D;
}
#yellow-background {
  background-color: var(--baby-yellow);
  height: 50vw;
}
#yellow-background h1 {
  font-size: 15px;
  text-align: center;
  padding: 0.3em;
}

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