Merge pull request #1675 from didi/feat-liner-gradient

fix(view): unable to display background image.
didi · Oct 29, 2024 · 8b2cd3a · 8b2cd3a
2 parents 26baa91 + 4273aba
commit 8b2cd3a
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
@@ -114,6 +114,17 @@ const applyHandlers = (handlers: Handler[], args: any[]) => {
   }
 }
 
+const normalizeStyle = (style: ExtendedViewStyle = {}) => {
+  ['backgroundSize', 'backgroundPosition'].forEach(name => {
+    if (style[name] && typeof style[name] === 'string') {
+      if (style[name].trim()) {
+        style[name] = style[name].split(' ')
+      }
+    }
+  })
+  return style
+}
+
 const isPercent = (val: string | number | undefined): val is string => typeof val === 'string' && PERCENT_REGEX.test(val)
 
 const isBackgroundSizeKeyword = (val: string | number): boolean => typeof val === 'string' && /^cover|contain$/.test(val)
@@ -501,7 +512,7 @@ function normalizeBackgroundSize (backgroundSize: Exclude<ExtendedViewStyle['bac
 }
 
 function preParseImage (imageStyle?: ExtendedViewStyle) {
-  const { backgroundImage = '', backgroundSize = ['auto'], backgroundPosition = [0, 0] } = imageStyle || {}
+  const { backgroundImage = '', backgroundSize = ['auto'], backgroundPosition = [0, 0] } = normalizeStyle(imageStyle) || {}
   const { type, src, linearInfo } = parseBgImage(backgroundImage)
 
   return {
@@ -589,8 +600,8 @@ function wrapImage (imageStyle?: ExtendedViewStyle) {
         }
         setImageSizeWidth(sizeInfo.current.width)
         setImageSizeHeight(sizeInfo.current.height)
-        setShow(true)
       }
+      setShow(true)
     } else if (sizeInfo.current) {
       setLayoutInfoWidth(width)
       setLayoutInfoHeight(height)