如何通过对象中的链接检索图像？

Question

我正在使用 Vue JS 创建一个 Web 应用程序。

我将对象转换为 JSON，但是，用于检索图像的链接仅以字符串形式出现，我知道 JSON 转换的作用。

有办法让链接带出图片吗？也许我在转换为 JSON 时遗漏了一些东西？

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"
        },
      ],
    }
  },

  methods: {
    blueEgg() {
      JSON.parse(JSON.stringify(intraining[0].image))

    },
  },

})
app.mount('#app')

: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;
}

<div id="app">

  <div class="container" id="yellow-background">
    <h1>In-training Stage</h1>
    <div class="image">{{baby[2].image}}</div>
  </div>

</div>

<script src="https://unpkg.com/vue@next"></script>

Answer 1

您可以使用以下

<div class="container" id="yellow-background">
  <h1>In-training Stage</h1>
  <img :src="baby[2].image" alt="">
</div>

更多细节也可以在这里找到：有一个嵌套的“src”：“”，在我打算在我的页面上显示的json对象中，我如何使用Vue选择它

Answer 2

正如 Kissu 提到的，这就是解决方案：

HTML

 <div class="container" id="yellow-background">
   <h1>In-training Stage</h1>
   <img :src="baby[2].image" alt="">
 </div>