预览图片的时候，顺序会颠倒

[TShuo22]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.2.20

Environment

chrome 128.0.6613.120 vue3.2.33

Reproduction link

https://codesandbox.io/p/sandbox/vue-antd-template-forked-yvx4pj?file=%2Fsrc%2Fcomponents%2FHelloWorld.vue%3A18%2C22

Steps to reproduce

在tabs里面嵌入 ，里面放多张图片，切换tab，预览图片的时候，顺序会颠倒

{{ dataInfo[`${activeKey}Info`] }}

What is expected?

顺序还是按照第一个开始

What is actually happening?

在tabs里面嵌入 ，里面放多张图片，切换tab，在切换回去后，预览图片的时候，顺序会颠倒

[inottn]

v-if 逻辑有问题，改成 v-if="item.key === activeKey"，或者 v-for 改成 v-for="items in imageList[${item.key}info]"

[LHiaoeng]

Image 的 referrerpolicy 什么时候加一下

[M69W]

有一个场景

1、这是一个帖子列表页，每一条帖子有一张或多种图;
2、在列表中默认显示每条帖子的缩略图(通过 POST 请求下载后再 利用 vue 给对象新增属性动态添加 temp)；
3、在列表页，点击某帖子的某张缩略图时，第一次会下载该条帖子的所有原图，以便预览原图；
4、假设有 temp_a.png、temp_b.png、temp_b.png 对应 原图 a.png、b.png、b.png；
5、假设点第二张缩略图(即点 temp_b.png)，按3、预定处理，遍历下载 该帖子的多个原图；
6、在5、中 通过 POST 请求下载后再 利用 vue 给对象新增属性动态添加 fullPic， 从而预览原图;

期待

按预定点击显示预定的原图，即 点击 第二张缩略图 能正常预览 第二张原图，也可以左右切换

问题

1、第一次点击第二张缩略图预览原图时，显示多种原图中的第一张原图，而不是第二张原图。
2、关闭原图预览后，再次点击 第二张缩略图 能正常预览 第二张原图，此时顺序是正常的。

相关代码

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

import { Image, ImagePreviewGroup } from 'ant-design-vue';

import { noPic } from './assets/img/no-pic'; //  默认图

const router = useRouter();
const list: any = ref([]);

const getListApi = async () => {
  // 此处省略 post 帖子请求。
  return 'list';
};

const getBase64 = async (params: any) => {
  console.log(params);
  // 此处省略 post 下载 、转 base64 处理过程。
  return 'data:image/png;base64';
};

// 获取图片
const getFile = async (param: any, type?: string) => {
  try {
    let params: any = {};

    if (type) {
      // 获取原图片
      params = {
        name: param?.fullName,
        path: param?.fullPath,
      };
      const FullPicUrl = await getBase64(params);
      param.fullPic = FullPicUrl; // 利用 vue 给对象新增属性动态添加 fullPic，以达到 预览原图 的目的
    } else {
      // 获取缩略图
      params = {
        name: param?.tempName,
        path: param?.tempPath,
      };
      const url = await getBase64(params);

      param.temp = url; // 利用 vue 给对象新增属性动态添加 temp，以达到 按顺序显示缩略图 的目的
      param.fullPic = noPic; // 同上；设置默认，用于判断只下载一次原图
    }
  } catch (error) {
    console.log('getFile error', error);
  }
};

// 获取帖子
const getList = async () => {
  try {
    const { datas } = await getListApi(); // 省略获取过程
    if (datas?.length) {
      list.value.push(...datas);
      list.value.forEach(async (item: any) => {
        if (item?.pictures && item.pictures.length > 0) {
          for (const picItem of item.pictures) {
            await getFile(picItem);
          }
        }
      });
    }
  } catch (error) {
    console.error('Erro:', error);
  }
};

// 获取原图
const getFullPic = async (item: any) => {
  console.log('原图 item', item);
  for (const picItem of item.pictures) {
    // 只遍历下载一次
    if (picItem.fullPic === noPic) {
      await getFile(picItem, 'full');
    }
  }
};

const gotoDetails = async (item: any) => {
  console.log('gotoDetails', item);
  const { id } = item;
  router.push({
    path: '/post/details',
    query: id,
  });
};

onMounted(async () => {
  getList();
});
</script>

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id" @click="gotoDetails(item)">
        <div class="content">
          <div class="content-picture">
            <ImagePreviewGroup class="web-image">
              <span v-for="(cItem, picIndex) of item.pictures" :key="picIndex">
                <Image
                  v-if="cItem.temp"
                  :height="200"
                  :preview="{
                    src: cItem.fullPic,
                  }"
                  :src="cItem.temp"
                  :width="200"
                  class="web-image-preview"
                  @click.stop="getFullPic(item)"
                >
                  <template #placeholder>
                    <Image :preview="false" :src="cItem.temp" :width="200" />
                  </template>
                </Image>
              </span>
            </ImagePreviewGroup>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

[cca313]

https://codesandbox.io/p/sandbox/vue-antd-template-forked-ynhz23?file=%2Fsrc%2Fcomponents%2FHelloWorld.vue%3A25%2C29
1.v-for不使用key
2.preview-group动态更新key
@M69W @TShuo22 可供参考

[M69W]

https://codesandbox.io/p/sandbox/vue-antd-template-forked-ynhz23?file=%2Fsrc%2Fcomponents%2FHelloWorld.vue%3A25%2C29 1.v-for不使用key 2.preview-group动态更新key @M69W @TShuo22 可供参考

感谢，没有达到目的。

场景有点不同，是点击目标图片时调接口挨个下载几张原图，而不是单独一个按钮。
原图片是点击缩略图时异步下载的，点击缩略图的同时也弹窗了，
此时显示并不是目标原图，实际效果是几张切换，最后显示这几张中的第一张原图。

[M69W]

https://codesandbox.io/p/sandbox/vue-antd-template-forked-ynhz23?file=%2Fsrc%2Fcomponents%2FHelloWorld.vue%3A25%2C29 1.v-for不使用key 2.preview-group动态更新key @M69W @TShuo22 可供参考

[cca313]

@M69W 没发现这个问题，有什么其他操作吗

[M69W]

@M69W 没发现这个问题，有什么其他操作吗

我那边用的demo 的代码套项目里用的
"ant-design-vue": "4.2.6",
"vue": "3.5.13",

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days