TMTApp/src/components/Course.vue

<template>
  <ion-card :router-link="'/tabs/course_detail/'+courseObj.id">
    <ion-img alt="Silhouette of mountains" :src="feature_img"  v-if="feature_img" class='img_16_9' />
    <ion-card-header>
      <ion-card-title>{{ courseObj.name }}</ion-card-title>
    </ion-card-header>

  </ion-card>
</template>

<script setup lang="ts">
  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonIcon, onIonViewWillEnter, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent, IonImg } from '@ionic/vue';

import { getTrainers, listCourses, BASE_URL } from '@/composable/settings';
  import { ref, onMounted } from 'vue'
  const props = defineProps({
    courseObj: Object,
  })
  const feature_img  = ref()
  onMounted(() => {
    console.log("--- onmounted ---")
    console.log("name === ", props.courseObj)
    if( props.courseObj.feature_img && !props.courseObj.feature_img.startsWith('http') ) {
      feature_img.value = BASE_URL + props.courseObj.feature_img
    }else {
      feature_img.value = props.courseObj.feature_img
    }
  })
  const truncate = (str) => {
    return "T "+str
  }
</script>

<style scoped>
#container {
  background-color:#f00;
}
ion-card-title {
  font-size:1em;
}
.img_16_9 {
  aspect-ratio: 16/9 auto;
  object-fit:cover;
}
</style>