Merge pull request #948 from xieliuduo/fix-imageUrl

refactor: convertImageUrl

Author: scottsut

frontend/src/app/pages/DashBoardPage/pages/Board/components/StyledBackground.tsx

@@ -19,15 +19,16 @@ import {
   BackgroundConfig,
   BorderConfig,
 } from 'app/pages/DashBoardPage/pages/Board/slice/types';
-import { convertImageUrl } from 'app/pages/DashBoardPage/utils';
+import { getBackgroundImage } from 'app/pages/DashBoardPage/utils';
 import styled from 'styled-components/macro';
 export interface StyledBackgroundProps {
   bg: BackgroundConfig;
   bd?: BorderConfig;
 }
+
 const StyledBackground = styled.div<StyledBackgroundProps>`
   background-color: ${p => p.bg?.color};
-  background-image: ${p => 'url(' + convertImageUrl(p.bg?.image) + ')'};
+  background-image: ${p => getBackgroundImage(p.bg?.image)};
   background-repeat: ${p => p.bg?.repeat};
   background-size: ${p => p.bg?.size};
   border-color: ${p => p?.bd?.color};

frontend/src/app/pages/DashBoardPage/utils/index.ts

@@ -67,6 +67,10 @@ export const convertImageUrl = (urlKey: string = ''): string => {
   }
   return urlKey;
 };
+export const getBackgroundImage = (url: string = ''): string => {
+  return url ? `url(${convertImageUrl(url)})` : 'none';
+};
+
 /**
  * @description '为了server 复制board 副本，原有board资源文件 和新副本资源文件 脱离关系 不受影响'
  * 将当前前端渲染环境 id 替换掉原有的id ，原来的和当前的相等不受影响

frontend/src/app/pages/DashBoardPage/utils/widget.ts

@@ -29,7 +29,7 @@ import { DeltaStatic } from 'quill';
 import { CSSProperties } from 'react';
 import { FONT_FAMILY, G90, WHITE } from 'styles/StyleConstants';
 import { uuidv4 } from 'utils/utils';
-import { convertImageUrl, fillPx } from '.';
+import { fillPx, getBackgroundImage } from '.';
 import {
   AutoBoardWidgetBackgroundDefault,
   BackgroundDefault,
@@ -705,7 +705,7 @@ export const getFreeWidgetStyle = (widget: Widget) => {
 export const getBackgroundCss = (bg: BackgroundConfig) => {
   let css: CSSProperties = {
     backgroundColor: bg.color,
-    backgroundImage: `url(${convertImageUrl(bg.image)})`,
+    backgroundImage: getBackgroundImage(bg.image),
     backgroundRepeat: bg.repeat,
     backgroundSize: bg.size,
   };