我正在使用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>
2条答案
按热度按时间ccrfmcuu1#
您可以使用以下方法
更多详细信息也可以在这里找到:存在嵌套的"src":"",在我想显示在我的页面上的json对象中,我如何使用Vue选择它
lp0sw83n2#
正如Kissu提到的,这就是解决方案:
超文本标记语言