Vue3（Quasar框架）中图片数组仅显示首尾元素问题求助

我在Vue3（Quasar框架）中使用以下代码展示存储为字符串元素的图片数组，但仅显示数组的第一个和最后一个元素，中间所有元素均未显示。已通过控制台确认数组已完整填充，图片数据格式也无问题。

展示效果：

代码如下：

<template>
  <div class="bg-white shadow-2"
    style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 750px; width: 820px;">
    <FullCalendar :options="options"
      style="position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); height: 600px; width: 700px;">
    </FullCalendar>
    <div class="q-pa-md"
      style="position: absolute; top: 86%; left: 50%; transform: translate(-50%, -50%); height: 100px; width: 800px;">
      <q-carousel v-model="slide" transition-prev="slide-right" transition-next="slide-left" swipeable animated
        control-color="amber" navigation padding arrows height="130px" class="bg-white shadow-2">
          <q-carousel-slide :name="1" class="column no-wrap">
            <div class="image-container">
              <q-img v-for="image in images" :key="image" :name="image" :src="image" class="rounded-borders"
                style="width: 54px;" />
            </div>
          </q-carousel-slide>
      </q-carousel>
    </div>
  </div>
</template>

<style>
.image-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 10px;
  margin-left: 180px;
}
</style>

解决方案 #

问题分析 #

1. image-container设置的margin-left: 180px结合q-carousel-slide的宽度限制，直接将中间区域的图片挤出可视范围，仅首尾元素刚好落在边缘显示。
2. 网格布局repeat(auto-fill, minmax(60px, 1fr))会自动换行，但q-carousel的height:130px限制了容器高度，换行后的图片超出高度被隐藏。

修复步骤 #

方案1：调整网格布局，居中显示所有元素

修改image-container样式，移除左侧边距，固定列宽并居中布局：

.image-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 64px); /* 固定列宽=图片宽度+gap */
  gap: 10px;
  justify-content: center;
  width: 100%;
}

同时将q-img的宽度改为自适应列宽：

<q-img v-for="image in images" :key="image" :name="image" :src="image" class="rounded-borders"
  style="width: 100%;" />

方案2：横向滚动显示所有图片

如果图片数量较多，适合用横向滚动代替网格换行，修改image-container样式：

.image-container {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 10px;
  width: 100%;
}

q-img可保留固定宽度：

<q-img v-for="image in images" :key="image" :name="image" :src="image" class="rounded-borders"
  style="width: 54px;" />

额外优化：利用Carousel原生轮播

如果需要轮播单张图片，建议每个图片单独作为一个q-carousel-slide，而非在单个slide里循环渲染：

<q-carousel v-model="slide" transition-prev="slide-right" transition-next="slide-left" swipeable animated
  control-color="amber" navigation padding arrows height="130px" class="bg-white shadow-2">
  <q-carousel-slide v-for="(image, idx) in images" :name="idx+1" :key="image">
    <q-img :src="image" class="rounded-borders" style="width: 54px;" />
  </q-carousel-slide>
</q-carousel>

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