refactor: use renderable guard for placeholder (#532)

Author: QDyanbing

package.json

@@ -44,7 +44,7 @@
   "dependencies": {
     "@rc-component/motion": "^1.0.0",
     "@rc-component/portal": "^2.1.2",
-    "@rc-component/util": "^1.11.1",
+    "@rc-component/util": "^1.13.0",
     "clsx": "^2.1.1"
   },
   "devDependencies": {

src/Image.tsx

@@ -1,4 +1,4 @@
-import { useControlledState } from '@rc-component/util';
+import { isReactRenderable, useControlledState } from '@rc-component/util';
 import { clsx } from 'clsx';
 import * as React from 'react';
 import { useContext, useMemo, useState } from 'react';
@@ -152,7 +152,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
   };
 
   // ========================= ImageProps =========================
-  const isCustomPlaceholder = placeholder && placeholder !== true;
+  const isCustomPlaceholder = isReactRenderable(placeholder) && placeholder !== true;
 
   const src = previewSrc ?? imgSrc;
   const [getImgRef, srcAndOnload, status] = useStatus({
@@ -273,7 +273,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
           onError={onError}
         />
 
-        {status === 'loading' && (
+        {status === 'loading' && isCustomPlaceholder && (
           <div aria-hidden="true" className={`${prefixCls}-placeholder`}>
             {placeholder}
           </div>