Skip to content

Image png透明图片 会显示placeholder #8189

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
1 task
wangfpp opened this issue May 22, 2025 · 6 comments · May be fixed by #8198
Closed
1 task

Image png透明图片 会显示placeholder #8189

wangfpp opened this issue May 22, 2025 · 6 comments · May be fixed by #8198

Comments

@wangfpp
Copy link

wangfpp commented May 22, 2025

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

Version

4.2.6

Environment

System: OS: macOS 15.0 CPU: (8) arm64 Apple M1 Pro Binaries: Node: 18.20.3 - ~/.volta/tools/image/node/18.20.3/bin/node Yarn: 1.22.17 - ~/.volta/tools/image/yarn/1.22.17/bin/yarn npm: 10.7.0 - ~/.volta/tools/image/node/18.20.3/bin/npm Browsers: Chrome: 136.0.7103.114 Edge: 135.0.3179.85 Safari: 18.0 npmGlobalPackages: @vue/cli: Not Found

Reproduction link

Edit on CodeSandbox

Steps to reproduce

  1. 使用a-image加载图片
  2. 使用placeholder属性设置为true
  3. 加载一个png的透明图片
    图片显示后会出现plaholder的背景图

What is expected?

png 的透明图正常加载但是不会显示plaholder

What is actually happening?

必现

<template>
<a-image
:width="200"
:placeholder="true"
src="https://i.postimg.cc/zDWYps2B/1747876838661-ukc8qk7w20250522-092008.png"
/>
</template>
@wangfpp
Copy link
Author

wangfpp commented May 22, 2025

Image

@selicens selicens added bug and removed bug labels May 22, 2025
@selicens
Copy link
Member

这个也不是bug，placeholder加载占位, 为 true 时使用默认占位，本身就不应该一直为true，获取到图片URL后应该将其置为false，如果需要处理图片加载失败的占位应使用fallbackAPI

@wangfpp
Copy link
Author

wangfpp commented May 22, 2025

@selicens 官方文档描述是加载占位, 为 true 时使用默认占位 | 我理解的是图片加载时的占位 类似loading 加载完成就应该隐藏loading

@selicens
Copy link
Member

自行处理吧

@wangfpp
Copy link
Author

wangfpp commented May 23, 2025

@selicens 可以自行处理 我想了解下这个组件placeholder 设计之初的用途是啥 是加载中的占位还是啥？
另外能否提供img.onLoad的事件暴露出来 现在只有error事件

yuantongkang pushed a commit to yuantongkang/ant-design-vue that referenced this issue May 24, 2025
fix(Image): Update loading state handling and add placeholder display…
525f33b 
… for error states vueComponent#8189
@yuantongkang yuantongkang mentioned this issue May 24, 2025
Open
@yuantongkang
Copy link
Contributor

这个也不是bug，placeholder加载占位, 为 true 时使用默认占位，本身就不应该一直为true，获取到图片URL后应该将其置为false，如果需要处理图片加载失败的占位应使用fallbackAPI

你这个逻辑不对，表单组件也有 placeholder 字段，一旦值不为 undefined，placeholder 也是不渲染的

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(Image): Update loading state handling yuantongkang/ant-design-vue
3 participants
@yuantongkang @wangfpp @selicens