Coding Challenge: Requesting Random Images from the Server

Problem statement

In this challenge, create a Nuxt project to request a random image from the server and create a catch-all route. The server/api/images/random.js file had a handler function containing five images. On each response, a randomly selected image URL will be returned.

Complete the project by completing the following steps:

• In the server/api/[...].js file:

  • Return a message property of “No server route found.”

• In the app.vue file:

  • Make a request to fetch a random image from the server.

  • Inside the <div> section, create a <p> element to display the catch-all message if an incorrect route is requested.

  • Add an <img> element to display the random image.

Try it yourself

Try the above steps to request the random image from the server and create a catch-all route.

If you’re unsure how to do this, click the “Show Hint” button.