Vue JS v-for循环显示图片，字符串插值导致错误答案

【问题标题】：Vue JS v-for Loop to display images, string interpolation leads to errorVue JS v-for循环显示图片，字符串插值导致错误
【发布时间】：2020-01-12 11:42:06
【问题描述】：

这是我的数据：

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

我这样循环，它显示了存储在我的数据对象中的文本：

<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 似乎没有正确处理它！

【问题讨论】：

要在标签之间“插值”，您使用{{ }} 语法，但要在开始标签内插值，您必须使用v-bind 指令，或者仅带有冒号的语法糖:。 v-bind:src="img"，或:src="img" 而不是src={{img}}
这是一个重复，你可以在stackoverflow上1分钟内轻松找到答案

标签： html vue.js v-for

【解决方案1】：

尝试改用<img :src="img" alt />

【讨论】：

不能解决所有问题，没有错误，但没有显示。更新了我的问题

【解决方案2】：

字符串插值只能用于显示必须绑定的属性中的值：

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

【讨论】：

我必须更改数据对象中的链接吗？没有错误，但没有显示任何内容