diff --git a/web/src/assets/img/catalogOrganization.png b/web/src/assets/img/catalogOrganization.png
new file mode 100644
index 00000000..191dc8f5
Binary files /dev/null and b/web/src/assets/img/catalogOrganization.png differ
diff --git a/web/src/assets/img/fishbone.png b/web/src/assets/img/fishbone.png
new file mode 100644
index 00000000..56b83410
Binary files /dev/null and b/web/src/assets/img/fishbone.png differ
diff --git a/web/src/assets/img/logicalStructure.png b/web/src/assets/img/logicalStructure.png
new file mode 100644
index 00000000..14efad95
Binary files /dev/null and b/web/src/assets/img/logicalStructure.png differ
diff --git a/web/src/assets/img/mindMap.png b/web/src/assets/img/mindMap.png
new file mode 100644
index 00000000..de8ac320
Binary files /dev/null and b/web/src/assets/img/mindMap.png differ
diff --git a/web/src/assets/img/organizationStructure.png b/web/src/assets/img/organizationStructure.png
new file mode 100644
index 00000000..9a677151
Binary files /dev/null and b/web/src/assets/img/organizationStructure.png differ
diff --git a/web/src/assets/img/timeline.png b/web/src/assets/img/timeline.png
new file mode 100644
index 00000000..df746cc0
Binary files /dev/null and b/web/src/assets/img/timeline.png differ
diff --git a/web/src/assets/img/timeline2.png b/web/src/assets/img/timeline2.png
new file mode 100644
index 00000000..9f3e8642
Binary files /dev/null and b/web/src/assets/img/timeline2.png differ
diff --git a/web/src/assets/img/verticalTimeline.png b/web/src/assets/img/verticalTimeline.png
new file mode 100644
index 00000000..febe8b7e
Binary files /dev/null and b/web/src/assets/img/verticalTimeline.png differ
diff --git a/web/src/config/constant.js b/web/src/config/constant.js
index 4d5aff82..87e82c94 100644
--- a/web/src/config/constant.js
+++ b/web/src/config/constant.js
@@ -1,13 +1,13 @@
 //  布局结构图片映射
 export const layoutImgMap = {
-    logicalStructure: require('../assets/img/logicalStructure.jpg'),
-    mindMap: require('../assets/img/mindMap.jpg'),
-    organizationStructure: require('../assets/img/organizationStructure.jpg'),
-    catalogOrganization: require('../assets/img/catalogOrganization.jpg'),
-    timeline: require('../assets/img/timeline.jpg'),
-    timeline2: require('../assets/img/timeline2.jpg'),
-    fishbone: require('../assets/img/fishbone.jpg'),
-    verticalTimeline: require('../assets/img/verticalTimeline.jpg'),
+    logicalStructure: require('../assets/img/logicalStructure.png'),
+    mindMap: require('../assets/img/mindMap.png'),
+    organizationStructure: require('../assets/img/organizationStructure.png'),
+    catalogOrganization: require('../assets/img/catalogOrganization.png'),
+    timeline: require('../assets/img/timeline.png'),
+    timeline2: require('../assets/img/timeline2.png'),
+    fishbone: require('../assets/img/fishbone.png'),
+    verticalTimeline: require('../assets/img/verticalTimeline.png'),
 }
 
 //  主题图片映射