ant-design-vue 为什么 placeholder 内的是缩略图？

Question

https://antdv.com/components/image-cn

<template>
    <a-space :size="12">
        <a-image :width="200"
            :src="`https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?${random}`">
            <template #placeholder>
                <a-image
                    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
                    :width="200" :preview="false" />
            </template>
        </a-image>
        <a-button type="primary" @click="random = Date.now()">reload</a-button>
    </a-space>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const random = ref();
</script>
  

上面的代码，为什么 placeholder 内的 a-image 是缩略图，而外层的是主图？这不反了吗?

Answer 1

placeholder 本意为 占位符，在题主代码中是用来做加载过渡的，怎么可能是主图呢

这种写法是为了加载大图时不会一直产生空白，所以才通过

<template #placeholder>
        <a-image src="xxx" :width="200" :preview="false" />
</template>

在加载主图期间展示，等主图加载完毕，就不再显示，它本身就是过渡用的，主图 是外层 a-space 下的 a-image