Как установить динамическую смену расширения файла?

Question

[Black_Fire]

Есть список элементов, в каждом отрисовывается иконка и текст

<v-list-item
  v-for="(listItem, index) of tabItem.list"
  :key="listItem.id ? listItem.id : index"
  :value="listItem.id"
  class="app-card-exchange-tabs__list-item"
  :class="`wrap-${listItem.iconName}`"
>
  <v-list-item-avatar height="32" width="32">
    <app-icon
      v-if="listItem.iconName"
      :iconName="listItem.iconName"
      :ext="'png'"
    />
  </v-list-item-avatar>

  <v-list-item-content>
    <v-list-item-title v-text="listItem.title"></v-list-item-title>
  </v-list-item-content>
</v-list-item>

Внутри иконки

<template>
  <img :src="require(`../../assets/icons/${iconName}.${ext || 'svg'}`)" :alt="iconName" :class="`img-${iconName}`">
</template>

<script>
  export default {
    name: "AppIcon",
    inheritAttrs: true,
    props: {
      iconName: { type: String, required: true },
      ext: { type: String, default: null }
    },
  };
</script>

<style scoped></style>

В общем почти все иконки с расширением свг, но лишь несколько с пнг. Поэтому через проп передаю расширение пнг и таким образом хочу чтобы установилось пнг или свг. Но если сделать так, то отрисовываются только пнг иконки, а нужно все.

Answer 1

[Антон Шаманов]

ext: { type: String, default: 'svg'}
и что за require в src?