how to use dynamic images in nuxt js 3?

Question

When i use loop then the images are not working. I want to add an images from my assets folder. Please help me, anyone. I'm using nuxt js 3.

This is array of objects

// images of hero
export const heroAvatars = () =>
    useState<AvatarProps[]>("avatars", () => [
        {
            id: 1,
            img: "~/assets/images/hero/img-03.png",
            name: "Antonio Carlos",
        },
        {
            id: 2,
            img: "~/assets/images/hero/img-01.png",
            name: "Jéssica Silva",
        },
        {
            id: 3,
            img: "~/assets/images/hero/img-02.png",
            name: "Luis Paulo",
        },
    ]);

I have use swiper js

<div class="ui-hero-mobile lg:hidden pt-[40px]">
            <swiper
                :slidesPerView="1"
                :spaceBetween="15"
                :loop="true"
                :centeredSlides="true"
                :pagination="pagination"
                :modules="modules"
                class="mySwiper"
                :autoplay="{
                    delay: 2500,
                    disableOnInteraction: true,
                }"
            >
                <swiper-slide v-for="avatar in avatars" v-bind:key="avatar.id">
                    <HeroProfileMobile :avatar="avatar" />
                </swiper-slide>
            </swiper>
        </div>

This is my img where i have added img src.

 <img
            class="ui-avatar w-full rounded-[12px] opacity-[0.6]"
            :src="avatar.img"
        />