title: Astronomy picture of the day Vue application
body: <p>I am new to vue and I am trying to call the APOD (Astronomy picture of the day) from NASA so that I can display a new picture every day.  I am making a new Vue component called Picture.vue where I do all of the accessing of the APOD api.  I have been able to get the proper url for the picture I want to display from the response payload (and store in a variable called 'apod') but simply put I don't know how to put the &quot;apod&quot; variable as a 'src' value into either a regular HTML 'img' tag or a vuetify 'v-img' tag.  I have a feeling this could be solved with v-bind but like I said I am new to Vue so any tips or guidance would be most appreciated.</p>
  <p>Picture.vue</p>
  <pre><code>
    &lt;section class=&quot;picture&quot;&gt;
      &lt;h1&gt;picture Component&lt;/h1&gt;
      &lt;v-img src=&quot;{{apod}}&quot;&gt;&lt;/v-img&gt;
    &lt;/section&gt;
  
  &lt;/template&gt;
  
  &lt;script lang=&quot;js&quot;&gt;
  const url =  &quot;https://api.nasa.gov/planetary/apod?api_key=&quot; + process.env.VUE_APP_KEY;
  const axios = require('axios');
   
  
  
    export default  {
      name: 'picture',
      props: [],
      async created () {
        console.log(&quot;https://api.nasa.gov/planetary/apod?api_key=&quot; + process.env.VUE_APP_KEY);
      //   axios.get(url)
      // .then(response =&gt; this.apod = response.data.url);
        const response = await axios.get(url);
        this.apod = response.data.url;
        console.log(response);
      },
      data () {
        
        return {
          apod: null
        }
      },
      methods: {
  
      },
      computed: {
  
      },
  
    state () {
       
    },
  
     
  }
  
  
  &lt;/script&gt;
  
  &lt;style scoped lang=&quot;scss&quot;&gt;
    .picture {
  
    }
  &lt;/style&gt;
  </code></pre>
  <p>App.vue</p>
  <pre><code>&lt;template&gt;
    &lt;v-app&gt;
        &lt;Picture&gt;&lt;/Picture&gt;
    &lt;/v-app&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
   import Picture from './components/Picture'
     
  export default {
    
    name: 'App',
    
    components: {
      Picture,
    },
    
    
    
    
  
  
    data() {
      
      return {
           
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  <p>In summary my question is how can I put the 'apod' variable as the value of 'src' in an image tag (Vuetify or HTML)?</p>
  <p>Thanks very much everyone happy easter!</p>