feat: img use cdn

Author: liuxy0551

next.config.js

@@ -1,5 +1,10 @@
 const nextConfig = {
     distDir: 'build',
+    images: {
+        domains: [
+            'assets.dtstack.com',
+        ],
+    },
 }
 
 module.exports = nextConfig

public/images/home/Taier.png

@@ -5,8 +5,8 @@ import { useRouter } from "next/router";
 import { Dropdown, Space, Menu } from 'antd';
 import { CaretDownOutlined } from '@ant-design/icons';
 import Image from "next/image";
-import Logo from "../static/images/logo.png";
 import styles from '../styles/navHeader.module.scss';
+import APP_CONF from "@/data/config";
 
 interface IProps {
     isShow: boolean;
@@ -42,7 +42,7 @@ function NavHeader(props: IProps) {
     return (
         <div className={styles.nav}>
             <div className={styles.leftMenu} onClick={() => router.push('/')}>
-                <Image src={Logo} width={46} height={52}/>
+                <Image src={`${APP_CONF.IMAGE_DOMAIN}/UEDLanding/Home/logo.png`} width={46} height={52}/>
                 <div className={styles.subtitle}>袋鼠云数栈UED</div>
             </div>
             <div className={styles.rightMenu}>

public/images/home/component.png

@@ -6,5 +6,6 @@ const APP_CONF = {
     DT_UTILS: 'https://dtstack.github.io/dt-utils/#/',
     DT_SQL_PARSER: 'https://dtstack.github.io/monaco-sql-languages/',
     DORAEMON: 'https://dtstack.github.io/doraemon/docsify/#/',
+    IMAGE_DOMAIN: 'http://assets.dtstack.com',
 }
 export default APP_CONF;

public/images/home/design.png

@@ -7,21 +7,21 @@ export const AboutDoc = {
 export const DesignSystem = [
     {
         key: 'design',
-        imgUrl: '/images/home/design.png',
+        imgUrl: `${APP_CONF.IMAGE_DOMAIN}/UEDLanding/Home/design.png`,
         title: '设计价值观',
         subTitle: '基于「严谨理想」、「简约克制」、「节奏韵律」和「数字化」的设计价值观，创造美好的用户体验。',
         jumpUrl: 'https://dtstack.github.io/ant-design-dtinsight-theme/docs/react/introduce-cn'
     },
     {
         key: 'eye',
-        imgUrl: '/images/home/eye.png',
+        imgUrl: `${APP_CONF.IMAGE_DOMAIN}/UEDLanding/Home/eye.png`,
         title: '视觉语言',
         subTitle: '以「极简易用」为设计理念，创造美好的用户体验同时赋能商业产品。',
         jumpUrl: 'https://dtstack.github.io/ant-design-dtinsight-theme/docs/react/color-cn'
     },
     {
         key: 'component',
-        imgUrl: '/images/home/component.png',
+        imgUrl: `${APP_CONF.IMAGE_DOMAIN}/UEDLanding/Home/component.png`,
         title: 'UI 组件库',
         subTitle: '旨在数栈产品生态体系内，建立友好、高效、一致的用户体验，最大程度适应不同需求。',
         jumpUrl: 'https://dtstack.github.io/ant-design-dtinsight-theme/components/breadcrumb-cn/'
@@ -31,7 +31,7 @@ export const DesignSystem = [
 export const LeftOrigin = [
     {
         key: 'molecule',
-        imgUrl: '/images/home/molecule.png',
+        imgUrl: `${APP_CONF.IMAGE_DOMAIN}/UEDLanding/Home/molecule.png`,
         title: 'Molecule',
         subTitle: '一个轻量级的 Web IDE UI 框架。',
         jumpUrl: APP_CONF.MOLECULE,
@@ -40,14 +40,14 @@ export const LeftOrigin = [
 export const RightOrigin = [
     {
         key: 'Taier',
-        imgUrl: '/images/home/Taier.png',
+        imgUrl: `${APP_CONF.IMAGE_DOMAIN}/UEDLanding/Home/Taier.png`,
         title: 'Taier',
         subTitle: '大数据平台-分布式任务调度系统。',
         jumpUrl: APP_CONF.TAIER,
     },
     {
         key: 'doraemon',
-        imgUrl: '/images/home/doraemon.png',
+        imgUrl: `${APP_CONF.IMAGE_DOMAIN}/UEDLanding/Home/doraemon.png`,
         title: 'Doraemon',
         subTitle: '一个帮你整理日常开发、配置、代理服务、主机资源的管理工具。',
         jumpUrl: APP_CONF.DORAEMON

public/images/home/doraemon.png

@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react';
 import NavHeader from "@/components/navHeader";
 import styles from '@/styles/about.module.scss';
 import Image from "next/image";
-import title from '@/static/images/about_title.png';
 import {AboutDoc} from '@/data/doc';
+import APP_CONF from "@/data/config";
 
 function Index() {
     const [bgHeight, setBgHeight] = useState('0px');
@@ -18,7 +18,7 @@ function Index() {
     return <div>
         <NavHeader isShow={false}/>
         <div className={styles.centerBox}>
-            <Image src={title} width={180} height={39}/>
+            <Image src={`${APP_CONF.IMAGE_DOMAIN}/UEDLanding/About/about_title.png`} width={180} height={39}/>
             <div className={styles.excerpt}>{AboutDoc.subtitle}</div>
         </div>
         <div className={styles.content} style={{ height: bgHeight }}>

public/images/home/eye.png

@@ -1,9 +1,9 @@
 import NavHeader from "@/components/navHeader";
 import Image from "next/image";
-import title from "@/static/images/home_title.png";
 import styles from '@/styles/home.module.scss';
 import {AboutDoc, DesignSystem, LeftOrigin, RightOrigin} from '@/data/doc';
 import {useEffect, useState} from "react";
+import APP_CONF from "@/data/config";
 import {Button} from "antd";
 
 function Home() {
@@ -24,7 +24,7 @@ function Home() {
             <div className={styles.header} style={{ height: bgHeight }}>
                 <NavHeader isShow={true}/>
                 <div className={styles.title}>
-                    <Image src={title} width={423} height={39}/>
+                    <Image src={`${APP_CONF.IMAGE_DOMAIN}/UEDLanding/Home/home_title.png`} width={423} height={39}/>
                 </div>
             </div>
             <div className={styles.body}>

public/images/home/molecule.png

@@ -17,7 +17,7 @@
 }
 
 .content {
-  background-image: url('../static/images/about_bg.png');
+  background-image: url('http://assets.dtstack.com/UEDLanding/About/about_bg.png');
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;

src/components/navHeader.tsx

@@ -1,5 +1,5 @@
 .header {
-  background-image: url('../static/images/home_background.png');
+  background-image: url('http://assets.dtstack.com/UEDLanding/Home/home_background.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -54,7 +54,7 @@
 }
 
 .origin {
-  background-image: url("../static/images/openOrigin_bg.png");
+  background-image: url("http://assets.dtstack.com/UEDLanding/Home/openOrigin_bg.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

src/data/config.ts

@@ -18,6 +18,7 @@
     "incremental": true,
     "esModuleInterop": true,
     "module": "esnext",
+    "moduleResolution": "Node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve"