0

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

<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>

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

1 ответ 1

0

Банальное решение: Добавьте в listItem поле: iconType - информацию о типе иконки.

Соответственно в :ext пишите listItem.iconType

Тут можете убрать || 'svg':

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

А вообще: правильнее было бы вообще убрать iconName и ext. И хранить в массиве только filename с полным названием файла.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.