From the course: Learning Nuxt.js
Join today to access over 24,400 courses taught by industry experts.
Challenge: Optimizing images using the Nuxt Image module
From the course: Learning Nuxt.js
Challenge: Optimizing images using the Nuxt Image module
(upbeat music) - [Instructor] Now that you've learned about Nuxt modules, it's your turn to try it out. For this challenge I want you to use the Nuxt Image module to add image optimization games to your app. We'll be using the same application from the previous challenge. You can find the code in the exercise files. Here's what I want you to do. First set up the Nuxt Image module in your app by installing it. You can check the documentation for a guide. Replace the image tag you have inside the gallery with a nuxt-img tag. Set a width and height property to make all images even across the page. Set a fit prop to preserve the aspect ratio of the images. Set the format for the images to be WebP, and finally set "loading=lazy" prop to defer loading the images until it appears on the screen.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.
