Coding Challenge: Using the Nuxt Image Component

Problem statement

In this challenge, create a Nuxt project to loop over and display images using the NuxtImage component. Create a function to handle toggling a border on the selected image when clicked. The index.vue file has been created, which includes an array of three images to loop over.

Complete the project by following the steps below:

1. Add the NuxtImage component inside the <li> section, which loops over the images array.

2. Add the following attributes to NuxtImage:

   1. Display each image by setting the :src attribute.

   2. Call the handleImageClicked function when clicked and pass the image as an argument.

   3. Set the width of the image to 200 px.

   4. Set the quality to 80%.

3. Complete the handleImageClicked function:

   1. If the conditional statement is true, set the selectedImage to the value of null.

   2. If the conditional statement is false, set the selectedImage to the value of the image.

4. Add a dynamic :style attribute to NuxtImage. Then, use it to set a 2px border if the image has been clicked.

Your output should look like this: