Vue JS v-для L oop для отображения изображений, интерполяция строк приводит к ошибке

Question

Это мои данные:

  data: () => ({
    html: [
      "../assets/html.png",
      "../assets/css.png",
      "../assets/scss.png",
      "../assets/materialize.png"
    ]
  })

I l oop через, как это, который показывает текст, хранящийся в моем объекте данных:

<p v-for="img in html" :key="img">{{img}}</p>

Однако я не могу использовать интерполяция внутри элементов, поэтому следующий код не работает.

  <v-flex xs6 md3 v-for="img in html" :key="img">
    <img src={{img}} alt />
  </v-flex>

Как это сделать?

Редактировать: ошибок нет, но пока не работает: ссылка HTML выглядит следующим образом это (работает):

</v-flex>
  <v-flex xs6 md3><img src=../assets/html.png alt /></v-flex>
</v-layout>

src="/img/html.6ec9ec76.png"

Предоставлено vue: src="../assets/materialize.png

Vue не обрабатывает это правильно, кажется!

Answer 1

Строковая интерполяция может использоваться только для отображения значения в атрибуте, который вы должны связать:

<v-flex xs6 md3 v-for="img in html" :key="img">
    <img :src="img" alt />
</v-flex>

Answer 2

Попробуйте использовать <img :src="img" alt /> вместо