A Beginner’s Guide To Nuxt 3/

...

/

Creating and Displaying Tags

Creating and Displaying Tags

Learn and practice how we can split the string of tags returned from the Pixabay API.

We'll cover the following...

Locating the tags property

When we make a request from the Pixabay API we receive an array of images. Each image is an object which resembles this:

Press + to interact
{
  "id": 195893,
  "pageURL": "https://pixabay.com/en/blossom-bloom-flower-195893/",
  "type": "photo",
  "tags": "blossom, bloom, flower",
  "previewURL": "https://cdn.pixabay.com/photo/2013/10/15/09/12/flower-195893_150.jpg"
  "previewWidth": 150,
  "previewHeight": 84,
  "webformatURL": "https://pixabay.com/get/35bbf209e13e39d2_640.jpg",
  "webformatWidth": 640,
  "webformatHeight": 360,
  "largeImageURL": "https://pixabay.com/get/ed6a99fd0a76647_1280.jpg",
  "fullHDURL": "https://pixabay.com/get/ed6a9369fd0a76647_1920.jpg",
  "imageURL": "https://pixabay.com/get/ed6a9364a9fd0a76647.jpg",
  "imageWidth": 4000,
  "imageHeight": 2250,
  "imageSize": 4731420,
  "views": 7671,
  "downloads": 6439,
  "likes": 5,
  "comments": 2,
  "user_id": 48777,
  "user": "Josch13",
  "userImageURL": "https://cdn.pixabay.com/user/2013/11/05/02-10-23-764_250x250.jpg",
}

Some key properties we use are:

  • Line 5: We have access to the tags from each image, we can use these to display and filter the images we display.

  • Line 9: The webFormatURL can be used to display an image that is 640 px wide.

  • Line 12: The largeImageURL property contains a 1280 px wide version of the image to display when we need a wider image.

  • Line 23: We can display the user name of the photographer with the ...