时间戳

首页 > 解决方案 > 天文学图Vue应用

javascript - 天文学图Vue应用

问题描述

我是 vue 的新手，我正在尝试从 NASA 调用 APOD（当天的天文图片），以便我可以每天显示一张新图片。我正在制作一个名为 Picture.vue 的新 Vue 组件，我在其中完成对 APOD api 的所有访问。我已经能够从响应有效负载中获取要显示的图片的正确 url（并存储在一个名为“apod”的变量中），但简单地说，我不知道如何将“apod”变量作为“ src' 值转换为常规 HTML 'img' 标签或 vuetify 'v-img' 标签。我觉得这可以通过 v-bind 解决，但就像我说我是 Vue 的新手，所以任何提示或指导将不胜感激。

图片.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.log("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.log(response);
    },
    data () {
      
      return {
        apod: null
      }
    },
    methods: {

    },
    computed: {

    },

  state () {
     
  },

   
}


</script>

<style scoped lang="scss">
  .picture {

  }
</style>

应用程序.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）中？

非常感谢大家复活节快乐！

标签： javascriptnode.jsvue.jsvue-component

解决方案

使用 :src 并删除 {{ }}

像这样

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

推荐阅读