Vue.js动态图片网格生成问题：调用函数后页面空白求助

你的页面空白是因为getImageId函数计算出的图片ID超出了0-359的范围，导致所有图片路径无效，q-img无法加载图片，最终页面显示空白。

错误原因验证 #

按照你当前的计算公式：

let picture_id = 359 - ((row - 1) * 24) + (col - 1)

当row=1，col=24时，计算结果为：359 - 0 + 23 = 382，这个数值远大于你预设的最大ID 359，对应的图片文件不存在，自然无法加载。

修复方案 #

调整getImageId的计算公式，将(col-1)改为被减去的项，确保计算出的ID始终在0-359范围内：

<template>
  <q-page class="page bg-brown-2 q-pa-lg">
    <div v-for="x in 15" :key="x" class="line flex flex-center row">
      <div v-for="y in 24" :key="y" class="pic">
        <q-img :src="require('../assets/Pictures/' + getImageId(x,y) + '.png')"></q-img>
      </div>
    </div>
  </q-page>
</template>

<script>
export default {
  name: 'BigPicturePage',

  methods: {
    getImageId(row, col) {
      // 修正公式：总ID减去当前位置的偏移量
      let picture_id = 359 - ((row - 1) * 24 + (col - 1))
      return picture_id
    },
  }
}
</script>

修复后验证 #

• 第1行第1列：359 - (0 + 0) = 359（正确）
• 第1行第24列：359 - (0 + 23) = 336（正确）
• 第15行第24列：359 - (14*24 +23) = 359 - 359 = 0（正确）

这样计算出的ID会从359依次递减到0，完全覆盖你所有的图片文件，页面就能正常渲染出完整的拼接大图了。

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