天文学图Vue应用

Posted 2023-02-23

【中文标题】天文学图Vue应用

【英文标题】：Astronomy picture of the day Vue application

【发布时间】：2021-06-30 19:13:45

【问题描述】：

我是 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>

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）中？

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

【参考方案1】：

使用 :src 并删除

喜欢这个

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