I have been utilizing Vue JS to develop a web application.
While converting the object into JSON, I've noticed that the link used to retrieve the image only appears as a string due to the JSON conversion process.
Is there a way for the link to properly display the image? Could it be an issue with my JSON conversion method?
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>