Астрономическая картина дня приложение Vue

Я новичок в 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)?

Большое спасибо всем счастливой пасхи!

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
19
1

Ответы 1

Используйте: src и удалите {{}}

как это

<v-img :src = "this.apod" />

Прекрасно, спасибо тебе большое.

Jasper 04.04.2021 23:08

Другие вопросы по теме