vue.js img如何从随机接口显示

npm install vue

<template>
  <div>
    <img :src="imageUrl" alt="随机图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: ''
    };
  },
  created() {
    this.getRandomImage();
  },
  methods: {
    getRandomImage() {
      // 使用适当的方法从随机接口获取图片URL
      // 可以使用Vue.js的内置方法，如axios或fetch
      // 以下是一个示例，使用axios从随机图片接口获取图片URL
      axios.get('https://api.example.com/random-image')
        .then(response => {
          this.imageUrl = response.data.url;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

import Vue from 'vue';
import RandomImage from './components/RandomImage.vue';

new Vue({
  el: '#app',
  components: {
    RandomImage
  },
  template: '<RandomImage/>'
});