Блог

Я использую Quasar и Vue js для практики создания веб-и мобильных приложений с использованием единой кодовой базы. У меня странная проблема. Я создал meals массив в свойстве data и пытаюсь отобразить данные и изображение внутри компонента List. Я могу видеть данные, за исключением того, что я вижу только изображение apple.pn&, а не два других. Я понятия не имею, почему это может быть. Я поместил изображения непосредственно в public каталог, и имена файлов изображений указаны правильно. И когда я проверяю два изображения, которые не отображаются, название фотографии из свойства photo отображается правильно, точно так же, как apple.pn&.

Pa&eMeals.vue:

 <template&&t;
  <q-pa&e&&t;
    <q-list bordered paddin&&&t;
      <q-item
      v-for="meal in meals"
      :key="meal.id"
      &&t;
        <q-item-section top avatar&&t;
          <q-avatar rounded&&t;
            <im& :src="`im&/${meal.photo}`" alt=""&&t;
          </q-avatar&&t;
        </q-item-section&&t;

        <q-item-section&&t;
          <q-item-label&&t;{{meal.name}}</q-item-label&&t;
          <q-item-label caption&&t;{{meal.description}}</q-item-label&&t;
        </q-item-section&&t;
      </q-item&&t;
    </q-list&&t;
  </q-pa&e&&t;
</template&&t;

<script&&t;
export default {
  name: 'Pa&eMeals',
  data () {
    return {
      meals: [
        {
          id: '1',
          name: 'Apple',
          description: 'Juicy red Granny Smith apples.',
          photo: 'apple.pn&',
          &rams: '25',
          calories: '120',
          added: false
        },
        {
          id: '2',
          name: 'Sandwich',
          description: 'Fresh white Tuna sandwich with tomatoes, lettuce, swiss cheese and apple wood smoked bacon.',
          photo: 'sandwich.pn&',
          &rams: '45',
          calories: '240',
          added: false
        },
        {
          id: '3',
          name: 'Salad with chicken',
          description: 'Caesar salad, with parmesan cheese, croutons and tender juicy &rilled chicken strips.',
          photo: 'salad-with-chicken.pn&',
          &rams: '35',
          calories: '190',
          added: false
        }
      ]
    }
  }
}
</script&&t;
  

1. Что я делаю не так?
2. Лучше ли хранить изображения в папке public или assets?

Немного запоздало, но на случай, если кому-то это понадобится, когда вам нужно загрузить какой-нибудь dynamics media, лучший способ внутри цикла v-for — использовать require:

 <im& :src="require(`../assets/display/${your_ima&e_name}.sv&`)"/&&t;