Skip to content

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

@wangfpp

Description

@wangfpp
  • 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>

Activity

wangfpp

wangfpp commented on May 22, 2025

@wangfpp
Author

Image

added and removed on May 22, 2025
selicens

selicens commented on May 22, 2025

@selicens
Member

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

wangfpp

wangfpp commented on May 22, 2025

@wangfpp
Author

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

selicens

selicens commented on May 22, 2025

@selicens
Member

自行处理吧

wangfpp

wangfpp commented on May 23, 2025

@wangfpp
Author

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

yuantongkang

yuantongkang commented on May 26, 2025

@yuantongkang
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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @yuantongkang@wangfpp@selicens

      Issue actions

        Image png透明图片 会显示placeholder · Issue #8189 · vueComponent/ant-design-vue