diff --git a/front-ui/src/views/datasource/const.js b/front-ui/src/views/datasource/const.js
index 31ed4b2d28e0f501a2bcd96ef090c6b03efa43e4..cc6aa3e5993939042d670a85db64b4f0e09be30d 100644
--- a/front-ui/src/views/datasource/const.js
+++ b/front-ui/src/views/datasource/const.js
@@ -67,6 +67,13 @@ const dsTypeList = [
   //   img: httpPng
   // }
 ]
+const dsImgObj = {
+  1: mysqlPng,
+  2: ESPng,
+  3: oraclePng,
+  4: redisPng,
+  100: kafkaPng
+}
 // 目标数据源 redis 类型
 const RedisTypes = [
   {
@@ -154,4 +161,4 @@ const OracleServerTypes = [
   }
 ]
 
-export { DataSourceType, dsTypeList, RedisTypes, dsConfigOriginList, OracleServerTypes }
+export { DataSourceType, dsTypeList, RedisTypes, dsConfigOriginList, OracleServerTypes, dsImgObj }
diff --git a/front-ui/src/views/job/JobSaveOrUpdate.vue b/front-ui/src/views/job/JobSaveOrUpdate.vue
index b0bd458a7e9b0eb959f29cb5729480de5ebb0d8b..cbd93ca5572b08957db32a47b5cc323233dfd16c 100644
--- a/front-ui/src/views/job/JobSaveOrUpdate.vue
+++ b/front-ui/src/views/job/JobSaveOrUpdate.vue
@@ -30,7 +30,12 @@
             <a-select @change="handleFromChange"
                       v-decorator="['selectedDataSource', {rules: [{required: true, message: '请选择来源数据源'}],initialValue: selectedDataSource}]">
               <a-select-option v-for="table in fromDsList" :value="table.dsId" :key="table.name">
-                {{ table.name }}
+                <div>
+                  <span class="ds-icon">
+                    <img :src="dsImgObj[table.type]" alt="">
+                  </span>
+                  <span>{{ table.name }}</span>
+                </div>
               </a-select-option>
             </a-select>
           </a-form-item>
@@ -40,7 +45,12 @@
             <a-select @change="handleToDsChange"
                       v-decorator="['selectedTargetSource', {rules: [{required: true, message: '请选择目标数据源'}],initialValue: selectedTargetSource}]">
               <a-select-option v-for="table in toDsList" :value="table.dsId" :key="table.name">
-                {{ table.name }}
+                <div>
+                  <span class="ds-icon">
+                    <img :src="dsImgObj[table.type]" alt="">
+                  </span>
+                  <span>{{ table.name }}</span>
+                </div>
               </a-select-option>
             </a-select>
           </a-form-item>
@@ -167,7 +177,7 @@
 import { fetchTables, getDsTbFieldsInfo, listQuery } from '@/api/datasource/datasource'
 import { addObj, getObj, modifyObj } from '@/api/job/job'
 import LoadingDx from './../../components/common/loading-dx.vue'
-import { RedisTypes } from './../datasource/const'
+import { RedisTypes, dsImgObj } from './../datasource/const'
 export default {
   components: {
     LoadingDx
@@ -175,6 +185,7 @@ export default {
   data () {
     return {
       RedisTypes,
+      dsImgObj,
       jobType: 'default',
       form: this.$form.createForm(this),
       selectedDataSource: null,
@@ -515,4 +526,20 @@ export default {
     }
   }
 }
+
+::v-deep .ds-icon {
+  float: left;
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  overflow: hidden;
+  margin-right: 4px;
+  img {
+    width: 24px;
+    height: 24px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+}
 </style>
diff --git a/front-ui/src/views/job/JobSaveOrUpdateStreaming.vue b/front-ui/src/views/job/JobSaveOrUpdateStreaming.vue
index 72b0614ccb7149b1164e4fb0645a2a81ffb9d155..84bc5f7b1dced52714e1add0bb3b842dad8f2961 100644
--- a/front-ui/src/views/job/JobSaveOrUpdateStreaming.vue
+++ b/front-ui/src/views/job/JobSaveOrUpdateStreaming.vue
@@ -29,7 +29,12 @@
             <label>来源数据源</label>
             <a-select v-model="selectedDataSource" @change="handleFromChange" placeholder="请选择来源数据源">
               <a-select-option v-for="table in fromDsList" :value="table.dsId" :key="table.name">
-                {{ table.name }}
+                <div>
+                  <span class="ds-icon">
+                    <img :src="dsImgObj[table.type]" alt="">
+                  </span>
+                  <span>{{ table.name }}</span>
+                </div>
               </a-select-option>
             </a-select>
           </a-col>
@@ -37,7 +42,12 @@
             <label>目标数据源</label>
             <a-select v-model="selectedTargetSource" @change="handleToDsChange" placeholder="请选择目标数据源">
               <a-select-option v-for="table in toDsList" :value="table.dsId" :key="table.name">
-                {{ table.name }}
+                <div>
+                  <span class="ds-icon">
+                    <img :src="dsImgObj[table.type]" alt="">
+                  </span>
+                  <span>{{ table.name }}</span>
+                </div>
               </a-select-option>
             </a-select>
           </a-col>
@@ -108,12 +118,14 @@
 import { fetchTables, listQuery } from '@/api/datasource/datasource'
 import { streamAddObj, getObj, streamModifyObj } from '@/api/job/job'
 import LoadingDx from './../../components/common/loading-dx.vue'
+import { dsImgObj } from './../datasource/const'
 export default {
   components: {
     LoadingDx
   },
   data () {
     return {
+      dsImgObj,
       jobType: 'default',
       form: this.$form.createForm(this),
       selectedDataSource: null,
@@ -303,4 +315,19 @@ export default {
     }
   }
 }
+::v-deep .ds-icon {
+  float: left;
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  overflow: hidden;
+  margin-right: 4px;
+  img {
+    width: 24px;
+    height: 24px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+}
 </style>