screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <h1>Vue js Show Random Image from API</h1> <div id="app"> <img :src="randomImage" alt="Random Image" /> <button @click="getRandomImage">Get Random Image</button> </div> <script type="module"> const app = Vue.createApp({ data() { return { randomImage: '' } }, methods: { getRandomImage() { const apiKey = '34464713-d6983b6f7516f75f27cdcbb6b'; const apiURL = `https://pixabay.com/api/?key=${apiKey}&orientation=horizontal&per_page=200`; axios.get(apiURL) .then(response => { const images = response.data.hits; const randomIndex = Math.floor(Math.random() * images.length); this.randomImage = images[randomIndex].webformatURL; }) .catch(error => { console.log(error); }); } }, mounted() { this.getRandomImage(); } }).mount('#app'); </script> <style scoped> </style> </body> </html>