designtopack/src/components/project/cards/VirtualSample.vue

<template>
  <Images
    v-if="step.files.dynamic || step.files.static"
    :step="step"
    :images="images"
    :uri="uri"
  />
</template>
<script setup>
import Images from "./Images.vue";
import { computed } from "vue";
const { step } = defineProps({ step: Object });

const images = computed(() => {
  return step.files?.dynamic?.map((track) => getFrontView(track)) ?? [];
});

const uri = "/" + step.uri;

function getFrontView(track) {
  if (track.files.length === 1) return track.files[0];
  const xMax = parseInt(
    track.files[track.files.length - 1].name.split("_")[1].split(".")[0]
  );
  const xFrontView = (xMax + 1) / 2;
  const extension = track.files[0].name.split(".")[1];
  const frontViewName = "0_" + xFrontView + "." + extension;
  const frontView = track.files.find((file) => file.name === frontViewName);
  return frontView;
}
</script>