cyber/src/pages/demoPages/podExercise/QuestionText.vue

<template>
  <general-renderer :content-input="processedText" class="question-text"></general-renderer>
<!--  <div v-html="" class="question-text"></div>-->
</template>

<script setup>
import { computed } from 'vue';
import GeneralRenderer from "../../../components/GeneralRenderer.vue";

const props = defineProps({
  text: {
    type: String,
    required: true
  },
  medias: {
    type: Object,
    required: true
  }
});

const mediaRegex = /<media i(\d+)>/g;

function replaceMedia(text, medias) {
  return text.replace(mediaRegex, (match, id) => {
    const mediaKey = `m${id}`;
    if (medias[mediaKey]) {
      const [type, url, width, height] = medias[mediaKey];
      if (type === 'image') {
        return `<img src="${url}" width="${width}" height="${height}" alt="Question Image" />`;
      }
    }
    return '';
  });
}

const processedText = computed(() => replaceMedia(props.text, props.medias));
</script>

<style scoped>
.question-text {
  line-height: 1.6;
}

.question-text img {
  max-width: 100%;
  height: auto;
  margin: 10px 0;
}
</style>