Vue中如何在v-for循环里拼接迭代式图片路径？

你在Vue的v-for循环中想要动态生成room1.jpg、room2.jpg这类图片文件名，原代码的图片路径写法存在问题，以下是对应的修正方案：

原问题代码（第二行存在错误） #

<div v-for="(p,i) in products" :key="i">
  <img src= "./assets/room"+str(i)+".jpg"  class = "room-img">
  <h4 @click="modelFlag = true">{{products[i]}}</h4>
  <p>{{prices[i]}}</p>
  <button @click="increase(i)">sign</button> 
</div>

你习惯的Python实现方式：

for i in range(number):
   "./assets/room"+str(i)+".jpg"

解决方法 #

Vue无法直接在src属性中使用原生字符串拼接语法，需要通过属性绑定（添加:前缀，即v-bind:src的缩写）来解析JavaScript表达式，下面两种方式都能实现需求：

方法1：ES6模板字符串（推荐）

用反引号包裹路径，通过${}插入变量，写法更简洁直观：

<div v-for="(p,i) in products" :key="i">
  <img :src=`./assets/room${i+1}.jpg` class="room-img">
  <!-- 注意：v-for的索引i从0开始，需加1才能对应room1.jpg这类命名 -->
  <h4 @click="modelFlag = true">{{p}}</h4>
  <p>{{prices[i]}}</p>
  <button @click="increase(i)">sign</button> 
</div>

方法2：普通字符串拼接

和Python的思路一致，但要放在属性绑定的表达式中：

<div v-for="(p,i) in products" :key="i">
  <img :src="./assets/room" + (i+1) + ".jpg" class="room-img">
  <h4 @click="modelFlag = true">{{p}}</h4>
  <p>{{prices[i]}}</p>
  <button @click="increase(i)">sign</button> 
</div>

补充提示 #

• 必须给src添加:前缀，否则Vue会把路径内容当成普通字符串解析，无法识别变量。
• 可以直接用{{p}}替代{{products[i]}}，因为v-for已经将当前循环项赋值给了p，写法更简洁。

内容的提问来源于stack exchange，提问作者박태영