Как вывести список на vue в тег?

Question

[kroha3000]

Вопрос, скорее всего, до безобразия глупый.

хочу вывести изображения из списка.

в списке только называния файлов.

data: {
    items: [
      { namefile: 'v-123' },
      { namefile: 'v-124' },
      { namefile: 'v-125' },
      { namefile: 'v-126' },
      { namefile: 'v-127' },
      { namefile: 'v-128' }
    ]
  }

{{ item.namefile }} - выводит название. Всё норм.

Но только вставляю его в конструкцию:

<img src="@/assets/images/{{ item.namefile }}.jpg">

Всё не так. Документацию перерыл, ничё найти не могу. с английским беда, а русская документация, почему то уже пару дней не открывается сайт.... Подскажите, как вставить. Понимаю, что, ошибка синтаксическая. но перепробовал уже много чего, ничего не выходит собственно:(

Answer 1

[Константин Б.]

<img :src="’@/assets/images/${ item.namefile }.jpg’">

Динамические атрибуты указываются через двоеточие. Это сокращение для v-bind
Если бы вы читами доку вы бы это знали

P.S. Одинарные кавычки в примере должны быть в обратную сторону.

Comments

[kroha3000]

Не получается. Понимаю что туплю. Но не выходит.

Вот код:

<div v-for="item in items">
<img :src="'@/assets/images/${ item.namefile }.jpg'">
</div>

export default {
  data() {
    return {
      items: [
      { namefile: 'a1' },
      { namefile: 'a2' },
      { namefile: 'a3' },
      { namefile: 'a4' },
      { namefile: 'a5' },
      { namefile: 'a6' },
      { namefile: 'a7' },
      { namefile: 'a8' },
      { namefile: 'a9' }
    ]
    }
  }
}

[kroha3000]

Если не сложно, помогите пожалуйста.

[Алексей Ярков]

kroha3000, на кавычки внимательно смотрите

[kroha3000]

Алексей Ярков, и вправду кавычки помогли. Спасибо!

[kroha3000]

Алексей Ярков, а ещё такой вопрос. Путь сейчас выводится как надо. А отрисовки изображений нет.

[kroha3000]

то есть вот такое изображение отрисовывается:

<img src="@/assets/images/1.jpg">

А такое нет:

<img :src="`@/assets/images/${ item.namefile }.jpg`">

Хотя пути везде одинаковые, то есть смотрю по коду, везде и там и там одинаковые: /assets/images/1.jpg

[Константин Б.]

kroha3000,

<img :src="require(`@/assets/${posts.img}`) "alt="">