IMG :src binding not working, im a beginner in VUE JS COMPOSITION API. thanks for helping. God Bless

[MysticMaccc]

the code doesnt load the image in the browser, the image path is absolutely correct. how can i fix this, thanks everyone.

carousel_data.js

export const carousel = [
{
id: 1,
url: '../../assets/carousel/carousel-1.jpg',
heading5: 'NYK-Fil Maritime E-Training, Inc.',
heading1: 'Preferred providers of quality maritime training.'
},
{
id: 2,
url: '../../assets/carousel/carousel-2.jpg',
heading5: 'NYK-Fil Maritime E-Training, Inc.',
heading1: 'Preferred providers of quality maritime training.'
},
{
id: 3,
url: '../../assets/carousel/carousel-3.jpg',
heading5: 'NYK-Fil Maritime E-Training, Inc.',
heading1: 'Preferred providers of quality maritime training.'
},
{
id: 4,
url: '../../assets/carousel/carousel-4.jpg',
heading5: 'NYK-Fil Maritime E-Training, Inc.',
heading1: 'Preferred providers of quality maritime training.'
},
];

carousel.vue

<script setup> import CarouselItem from '../reusable/CarouselItem.vue'; import {carousel} from '../../data/carousel_data.js'; const carousels = carousel; </script>

Previous Next

CarouselItem.vue

<script setup> import { computed } from "vue"; const props = defineProps({ carousel:Object, }); // const carousel_active = computed(() => props.carousel.id == 1 ? 'active' : '' ); </script>

{{ carousel.heading5 }} {{ carousel.url }}

{{ carousel.heading1 }}

[skirtles-code]

You need to import the images so the bundler can process them.

See https://skirtles-code.github.io/vue-examples/guides/working-with-image-assets.html for an explanation.