Vue Show Random Image

<html>

<body>
<div id="app">
  <h3>Vue Show Random Image from Array</h3>
  <img :src="randomImageUrl" alt="Random Image" class="random-image">
  <button @click="changeImage" class="change-image-btn">Change Image</button>
</div>
  <script type="module">
    const app = new Vue({
      el: "#app",
      data() {
        return {
          images: [
            'https://www.sarkarinaukriexams.com/images/post/1683451563Vue_Js_Open_link_in_new_tab.jpg',
            'https://www.sarkarinaukriexams.com/images/post/1683449872Vue_js_convert_String_to_Array_(1).jpg',
            'https://www.sarkarinaukriexams.com/images/post/1683575181Vue_Js_show_image_in_popup.png',
            'https://www.sarkarinaukriexams.com/images/post/1683452975Vue_Display_Json_Data_as_Table.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>
  <style scoped>
    /* CSS for the app container */
    #app {
      text-align: center;
      margin-top: 20px;
    }

/* CSS for the random image */
    .random-image {
      width: 300px;
      height: auto;
      margin: 20px auto;
      border: 1px solid #ccc;
      border-radius: 5px;
      display: block;
    }

/* CSS for the change image button */
    .change-image-btn {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

/* CSS for the button hover effect */
    .change-image-btn:hover {
      background-color: #0056b3;
    }
  </style>
</body>

</html>