vue.js - 在 Image SRC 中连接数据

Question

我正在从 API 获取数据，然后使用 V-FOR 显示它。我从这个 API 获取数据和索引，但是我不会拼接索引并将切片数据插入到 ImG Src 属性中。我不确定如何将新索引切片并插入到 img src 中。

请帮忙

<td><img src="https://example.io/us/flat/64.png"></td>
<td><span class="badge badge-primary">{{index.slice(0,2)}}</span></td>
<td>1 {{base}} = {{data}}</td> 
<td>{{time}}</td>

Answer 1

您可以使用 vue 设置整个源：

<img v-bind:src="'https://example.io/us/flat/' + index.slice(0,2) + '.png'" />

或更短

<img :src="'https://example.io/us/flat/' + index.slice(0,2) + '.png'" />