I am facing an issue with this code snippet as the image is not being displayed. I have double-checked the path to the image and everything seems to be correct. I am unable to figure out what the problem is, as everything looks clear in the console.
<v-card v-for="(course, i) in courses" :key="i">
<v-img :src="course.src"></v-img>
<v-card-subtitle>{{ course.title }}</v-card-subtitle>
<v-card-actions>
<v-progress-linear
v-model="art"
color="blue-grey"
height="25"
>
<template v-slot="{ value }">
<strong>{{ Math.ceil(value) }}%</strong>
</template>
</v-progress-linear>
<span>
<v-btn type="success">
Continue
</v-btn>
</span>
</v-card-actions>
</v-card>
<script>
export default {
data: () => ({
courses: [
{title: 'Graphic Design', src: '../assets/images/course-maths.png'},
{title: 'Preparatory course for high school mathematics institutions', src: '../assets/images/course-maths.png'}
],
art: 43,
}),
}
</script>
Appreciate your help in advance.