Я новичок в vue и пытаюсь вызвать APOD (астрономическое изображение дня) от НАСА, чтобы каждый день отображать новое изображение. Я создаю новый компонент Vue под названием Picture.vue, в котором я выполняю весь доступ к APOD APOD. Мне удалось получить правильный URL-адрес для изображения, которое я хочу отобразить, из полезной нагрузки ответа (и сохранить в переменной под названием 'apod'), но, проще говоря, я не знаю, как поместить переменную "apod" как ' src 'в обычный HTML-тег img или vuetify' v-img '. У меня есть ощущение, что эту проблему можно решить с помощью v-bind, но, как я уже сказал, я новичок в Vue, поэтому любые советы и рекомендации будут очень признательны.
Picture.vue
<section class = "picture">
<h1>picture Component</h1>
<v-img src = "{{apod}}"></v-img>
</section>
</template>
<script lang = "js">
const url = "https://api.nasa.gov/planetary/apod?api_key = " + process.env.VUE_APP_KEY;
const axios = require('axios');
export default {
name: 'picture',
props: [],
async created () {
console.info("https://api.nasa.gov/planetary/apod?api_key = " + process.env.VUE_APP_KEY);
// axios.get(url)
// .then(response => this.apod = response.data.url);
const response = await axios.get(url);
this.apod = response.data.url;
console.info(response);
},
data () {
return {
apod: null
}
},
methods: {
},
computed: {
},
state () {
},
}
</script>
<style scoped lang = "scss">
.picture {
}
</style>
App.vue
<template>
<v-app>
<Picture></Picture>
</v-app>
</template>
<script>
import Picture from './components/Picture'
export default {
name: 'App',
components: {
Picture,
},
data() {
return {
}
}
};
</script>
Подводя итог, мой вопрос: как я могу поместить переменную apod в качестве значения src в тег изображения (Vuetify или HTML)?
Большое спасибо всем счастливой пасхи!



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Используйте: src и удалите {{}}
как это
<v-img :src = "this.apod" />
Прекрасно, спасибо тебе большое.