v-for中的Vue.js链接插值

我试图在vue文档中查找信息，但没有找到此信息。在这种情况下，如何使用vue js将信息传递给{Icon}

  <div class="weekfor">
    <h1>{{display(City)}}</h1>
    <div v-for="item of cast" :key="item.icon">
      <h1>{{item.Icon}}</h1> //output:'10d'
      <img src="http://openweathermap.org/img/wn/{{item.Icon}}@2x.png"> //must be output "http://openweathermap.org/img/wn/10d@2x.png"
      </div>
  </div>
</template>

{{显示（城市）}
{{item.Icon}//输出：'10d'
//必须是“输出”http://openweathermap.org/img/wn/10d@2x.png“

您应该这样做

<img :src="`http://openweathermap.org/img/wn/${item.Icon}@2x.png`">

请注意

：

这是src之前的

v-bind:

的缩写，这意味着您将表达式值绑定到此属性，而不是字符串，这是您的情况，然后您使用字符串模板构造字符串，并使用

${item.icon}

传递它。欢迎！查看vue.je指南，了解更多有关vue语法的信息。