Vue.js中v-for循环内动态图片无法显示的问题求助

你的问题出在没有使用Vue的属性绑定语法，直接在src属性里写字符串拼接代码，浏览器会把整个字符串当作图片路径，自然无法正确解析piatto.img_id变量。

快速修复方案 #

直接用v-bind:src（简写为:src）绑定属性，让Vue解析表达式完成路径拼接：

写法一：ES6模板字符串（推荐，更清晰） #

<div v-for="piatto in portata" class="card mb-3">
  <div class="row">
    <div class="col-lg-4">
      <!-- 用:src绑定，模板字符串插入变量 -->
      <img :src="`/img/food/${piatto.img_id}.jpg`" alt="" style="height:;" class="img-fluid rounded-start img-thumbnail">
    </div>
    <!-- 其他代码不变 -->
  </div>
</div>

写法二：字符串拼接 #

如果不习惯模板字符串，也可以用+号拼接：

<img :src="'/img/food/' + piatto.img_id + '.jpg'" alt="" style="height:;" class="img-fluid rounded-start img-thumbnail">

进阶方案（适合复杂路径逻辑） #

如果路径规则需要复用或者更复杂，可通过计算属性提前处理图片路径：

// 组件的script部分
export default {
  data() {
    return {
      portata: [] // 你的数据数组
    }
  },
  computed: {
    portataWithImgUrl() {
      return this.portata.map(item => ({
        ...item,
        // 提前拼接好图片路径
        imgUrl: `/img/food/${item.img_id}.jpg`
      }))
    }
  }
}

然后在模板中遍历处理后的数组：

<div v-for="piatto in portataWithImgUrl" class="card mb-3">
  <div class="col-lg-4">
    <img :src="piatto.imgUrl" alt="" style="height:;" class="img-fluid rounded-start img-thumbnail">
  </div>
  <!-- 其他代码不变 -->
</div>

额外注意 #

确认你的图片文件实际位置是否正确：

• 如果是Vue CLI项目，静态图片放在public目录下的话，路径/img/food/xxx.jpg是正确的；
• 如果放在src/assets目录，需要用@/assets/img/food/${piatto.img_id}.jpg这样的路径（@指代src目录）。

内容的提问来源于stack exchange，提问作者Shodan4004