How to pass dynamic image url in nuxt project

Managing dynamic image URLs in Nuxt.js projects typically involves several steps to ensure images are dynamically loaded and updated based on requirements. Below are the general steps and implementation methods:

1. Identify the source of image data

First, determine where the image URLs will originate from. Typically, this data comes from API calls or static files. For instance, if your project features a product list, each product may retrieve information such as the image URL from a database.

2. Set up API calls in Nuxt

If the image URLs are stored on the backend, configure API calls within your Nuxt project to fetch this data. You can make these calls within the asyncData or fetch methods.

javascript
async asyncData({ $axios }) {
  const res = await $axios.$get('https://api.example.com/products');
  return { products: res.products }
}

In this example, we assume the API returns a product list where each product includes an image URL.

3. Use v-bind to dynamically bind the image URL

In Nuxt components or pages, utilize Vue's v-bind directive (abbreviated as :) to dynamically bind the src attribute to the image element.

html
<template>
  <div>
    <div v-for="product in products" :key="product.id">
      <img :src="product.imageUrl" :alt="product.name">
      <h2>{{ product.name }}</h2>
    </div>
  </div>
</template>

In this example, each product has an imageUrl property that is bound to the src attribute of the <img> tag.

4. Handle loading errors or placeholders

In practical applications, images may fail to load due to various reasons. Handle these cases by listening to the error event.

html
<img :src="product.imageUrl" @error="handleImageError" :alt="product.name">

<script>
export default {
  methods: {
    handleImageError(event) {
      event.target.src = '/default-image.png'; // Default image
    }
  }
}
</script>

5. Use Nuxt image optimization modules

Nuxt offers image optimization modules, such as @nuxt/image, which facilitate handling image loading, optimization, and caching.

bash
npm install @nuxt/image

Configure the module in nuxt.config.js:

javascript
export default {
  buildModules: [
    '@nuxt/image',
  ]
}

Then use it in components:

html
<nuxt-img src="product.imageUrl" />

The @nuxt/image module automatically handles optimizations such as lazy loading and resizing.

By following these steps, you can effectively manage dynamic image URLs in Nuxt projects while ensuring responsive and performant user interfaces.