[Vuejs]-Vue.js 3 Composition API online url for image

so you want to make list of img/div tags for the data ?

<div v-for="i in data" :key="i.name" :alt="i.name" >
   <img :src="i.image" />
   <div>{{i.name}}</div>
   <div>{{i.price}}</div>
</div>

There are a few oddities with the example you shared.
First of all it looks like you are forgetting to loop over the products array.
Then in your Products component the prop name you use for accessing the image is not the one you define (image => imagine). And you are also missing the quotes: :src="your_prop"
Also, next time, please share some code, not images, as it is very difficult to read.

Try this:

Main

<script setup lang="ts">
// import product component from xx/xx

const products = [
  {
    name: "hello1",
    price: "price1",
    image: "https://picsum.photos/200/300",
    description: "description1",
  },
  {
    name: "hello2",
    price: "price2",
    image: "https://picsum.photos/200/300",
    description: "description",
  },
];
</script>

<template>
  <Products
    v-for="product in products"
    :name="product.name"
    :description="product.description"
    :image="product.image"
    :key="product.name"
  />
</template>

Products

<script setup lang="ts">
const props = defineProps({
  name: { type: String, required: true },
  image: { type: String, required: true },
  description: { type: String, required: true },
});
</script>

<template>
  <img :src="props.image" />
</template>

I don’t know why the first guy deleted his answer…Basically, I don’t know why but there was a wrong behavior by the browser or vue, don’t ask me, I’m new. It didn’t work, now it works. There was nothing wrong in it. :src="image" was right. Don’t ask me why it didn’t work before because I wouldn’t know…