Vue Get Image from URL

Vue Get Image From Url: Vue is a popular JavaScript framework used for building user interfaces. To display images in a Vue application, you can use the img HTML element and set its src attribute to the URL of the image you want to display. This URL can be obtained from various sources such as a backend API or from local data.

To fetch images from an API, you can use the built-in fetch or axios library to make HTTP requests and get the image data as a response. Once you have the image data, you can display it by setting the src attribute of an img element to a base64 encoded data URL or by creating a new Image object and setting its src attribute to the URL.

To display images from local data, you can import the image file and set its path as the src attribute of the img element. Vue also provides a v-bind directive to dynamically bind data to an element’s attribute, which can be useful when working with dynamic image URLs.

How can I use Vue.js to display an image from a URL?

This code creates a Vue application that fetches images from the Pixabay API and displays them on a web page. The application retrieves images based on search criteria and allows the user to navigate through the images using the previous and next buttons.

The data function defines several variables that store information about the images, including the image URL, page number, number of images per page, and the total number of hits (i.e., search results).

The mounted function is a lifecycle hook that runs when the application is mounted to the DOM. It calls the fetchImages method to retrieve the first set of images.

The fetchImages method uses Axios to make a GET request to the Pixabay API and retrieves the image URL from the response data. It also updates the total hits variable to reflect the number of search results.

The prevImage and nextImage methods allow the user to navigate through the images. The prevImage method decrements the current image index or moves to the previous page if there are no more images on the current page. The nextImage method increments the current image index or moves to the next page if there are no more images on the current page.

Finally, the app.mount function mounts the Vue application to the DOM.

Vue Js Get Image From URL Example

<div id="app">
    <img :src="imageUrl" alt="Image">
    <div>
      <button @click="prevImage">Previous</button>
      <button @click="nextImage">Next</button>
    </div>
</div>
<script type="module">
    const app = Vue.createApp({
      data() {
        return {
          imageUrl: null,
          page: 1,
          perPage: 10,
          totalHits: null,
          currentImageIndex: 0
        };
      },
      mounted() {
        this.fetchImages();
      },
      methods: {
        fetchImages() {
          axios
            .get(`https://pixabay.com/api/?key=34464713-d6983b6f7516f75f27cdcbb6b&q=nature&page=${this.page}&per_page=${this.perPage}`)
            .then(response => {
              console.log(response.data)
              this.imageUrl = response.data.hits[this.currentImageIndex].webformatURL;
              this.totalHits = response.data.totalHits;
            })
            .catch(error => {
              console.error(error);
            });
        },
        prevImage() {
          if (this.currentImageIndex > 0) {
            this.currentImageIndex--;
          } else {
            this.page--;
            this.currentImageIndex = this.perPage - 1;
            if (this.page < 1) {
              this.page = 1;
              this.currentImageIndex = 0;
            }
          }
          this.fetchImages();
        },
        nextImage() {
          if (this.currentImageIndex < this.perPage - 1 && this.currentImageIndex < this.totalHits - 1) {
            this.currentImageIndex++;
          } else {
            this.page++;
            this.currentImageIndex = 0;
            if (this.page * this.perPage > this.totalHits) {
              this.page = Math.ceil(this.totalHits / this.perPage);
            }
          }
          this.fetchImages();
        }
      }
    });
  app.mount("#app");
 </script>