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

olhwl3o2  于 2022-12-28  发布在  Java
关注(0)|答案(2)|浏览(105)

我正在使用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>
ccrfmcuu

ccrfmcuu1#

您可以使用以下方法

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

更多详细信息也可以在这里找到:存在嵌套的"src":"",在我想显示在我的页面上的json对象中,我如何使用Vue选择它

lp0sw83n

lp0sw83n2#

正如Kissu提到的,这就是解决方案:
超文本标记语言

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

相关问题