Vue Show Random Image :To show a random image using Vue, you could first define an array of image URLs in your Vue data object. Then, create a computed property that generates a random number between 0 and the length of the array. Finally, use a v-bind directive to bind the src attribute of an img element to the computed property, which will result in a random image being displayed each time the component is rendered.
How can I use Vue js to display a random image from a set of images?
This code shows a Vue.js implementation that displays a random image from a set of images. The set of images is stored in the images array in the data object.
The image source is bound to the randomImageUrl computed property, which returns a random image URL from the images array. The changeImage method updates the randomImage property with a new random image URL when the “Change Image” button is clicked.
To display the image, an <img> element is used with its src attribute bound to the randomImageUrl property.
Overall, this code demonstrates how Vue.js can be used to dynamically display images from a set of images, with the ability to change the displayed image by clicking a button.
Vue Show Random Image Example
<div id="app">
<img :src="randomImageUrl" alt="Random Image">
<button @click="changeImage">Change Image</button>
</div>
<script type="module">
const app = new Vue({
el: "#app",
data() {
return {
images: [
'https://pixabay.com/get/g752e5b8f32eb61223efeaf8e63db44ba791c84eb41633700aa3b11bf0fd162f2da7df577fc0063cb41b58ba5cc8c1d13d945d113855beb0f3df24ed2aebadf37_640.jpg',
'https://pixabay.com/get/gb4a85858c164ad76002abeb78de46b8c9ce882af558ded5b2004cfddf20e34ac81c92296ce43baa48a31a83711b903ce00ec486a3977dd93a3a00633d943e4ef_640.jpg',
'https://pixabay.com/get/gb48c329fa4eb9ed986cf48340c1928ea3dc8cea7ae11f3a2b50689ad6b59beca9b14a58a9a448f8398e78e08ba0dfd3ef857b8abbc28ac0b0eb184134175d566_640.jpg',
'https://pixabay.com/get/g47f5fe81279d8ef408059998bbc82c71490218961d84948cc5478d9bafbd924380eacbdec9facbeed23c00f2f2418a429bd82527a990af62be14b24f86b86fb1_640.jpg',
// add more image URLs here
],
randomImage: null
}
},
methods: {
getRandomIndex() {
return Math.floor(Math.random() * this.images.length);
},
changeImage() {
// Update the randomImage
this.randomImage = this.images[this.getRandomIndex()];
}
},
computed: {
randomImageUrl() {
this.randomImage = this.images[this.getRandomIndex()];
return this.randomImage;
}
}
});
</script>
Output of Vue Show Random Image
How can I use Vue js to fetch a random image from an API and display it in my web application?
To display a random image from an API using Vue.js, you could first make an API call to retrieve a set of image URLs. Then, store the image URLs in an array in your Vue data object. Create a computed property that generates a random number between 0 and the length of the array. Finally, use a v-bind directive to bind the src attribute of an img element to the computed property, which will result in a random image being displayed each time the component is rendered.
Here is an example code that demonstrates how to display a random image from an API using Vue.js:
Vue Show Random Image From API Example
<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>
Output of Vue Js Show Random Image from API
