How to create correct path for images to use axios with own json files?

Hi
I want to display my own images and other value, which are stored in products.json by using v-for directive. I have installed axios and json server
Everything works good but I have problem with displaying images.

<div v-for ="product in this.products" class="row product" :key = 'product.index'>
        <div class="col d-flex justify-content-end">
            <figure class="product__img-wrapper me-5">
                <img :src="product.image" class="product__img">
            </figure>
        </div>
        <div class="col product__item d-flex flex-column justify-content-center align-items-start">
            <h3 v-text="product.tittle" class="text-uppercase mt-2"></h3>
            <p v-html="product.description" class="m-0"></p>
            <p v-text="this.formatPrice()"></p>
            <div class="d-flex align-items-center">
                <button @click="this.addToCart" v-if="this.canAddToCart" type="button" class="btn btn-primary mt-3">Add to cart
                </button>
                <button v-else type="button" class="btn btn-primary mt-3 enabled d-inline">Add to cart
                </button>
                <span class="inventory-message mt-3 ms-3 text-danger" v-if="this.emptyStock">empty stock</span>
                <span class="inventory-message mt-3 ms-3 text-danger" v-else-if="this.lowStock">only {{this.product.availableInventory-this.cartItemCount }} left</span>
                <span class="inventory-message mt-3 ms-3 text-danger" v-else-if="this.buyNow">Buy now</span>
            </div>
            <div class="rating">
                <span :class="{'rating-active' : this.checkRating(n)}" v-for="(n, i) in 5" :key="i"><i class="bi bi-star-fill"></i></span>
            </div>
        </div>

Inside data() workes perfectly:

 data() {
        return {
            siteName: 'shop for animals',
            flag: true,
            question: undefined,
            product: {
                id: 1001,
                tittle: 'food for the cat',
                description: 'very <em>tasty</em>',
                price: 700,
                image: require("../image/hot-dog-6922269_1920.png"),

                availableInventory: 10,
                rating: 3,
            },
            products: [],
            cart: [],
            showProduct: true,
        };
    },

But with using JOSN file:

{
  "products": [{
      "id": 1001,
      "tittle": "food for the cat",
      "description": "very <em>tasty</em>",
      "price": 700,
      "image": "require(../image/hot-dog-6922269_1920.png)",
      "availableInventory": 10,
      "rating": 3
    }
  ]

}

How to create correct products.image to display image?

JSON is a static format, meaning you can’t import/require (or have any functions for that matter).

Here are 3 different approaches,

  1. The server maintains the reference to the image file as an absolute url and returns that as the image src. Commonly images are hosted on CDN/cloud servers.
  2. Similar to the above, you host your images within the public folder and reference them absolutely as a static asset.
  3. You just include the file name (hot-dog-6922269_1920.png) and resolve the path within your component - I’m not really a fan of this approach as its easily prone to bugs.

Thanks James,