diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts
index 1b737f701d..0df2ca194c 100644
--- a/core/core-frontend/src/custom-component/component-list.ts
+++ b/core/core-frontend/src/custom-component/component-list.ts
@@ -309,7 +309,10 @@ const list = [
     propValue: {
       textValue: '',
       url: '',
-      pictureShowType: 'common', // 图片显示方式 common 正常显示 dataset 绑定数据集显示
+      pictureAttr: {
+        showType: 'common', // 图片显示方式 common 正常显示 dataset 绑定数据集显示
+        dsConditionShowType: 'show' // dataset条件满足时显示方式 show显示 hidden 隐藏
+      },
       flip: {
         horizontal: false,
         vertical: false
@@ -607,6 +610,9 @@ export function findNewComponentFromList(
       if (comp.component === 'DeTabs') {
         newComponent.propValue[0].name = guid()
       }
+      if (newComponent.innerType === 'Picture') {
+        newComponent.style['adaptation'] = 'adaptation'
+      }
     }
   })
 
diff --git a/core/core-frontend/src/custom-component/picture/Attr.vue b/core/core-frontend/src/custom-component/picture/Attr.vue
index fa6cb92f31..6c1d435ddd 100644
--- a/core/core-frontend/src/custom-component/picture/Attr.vue
+++ b/core/core-frontend/src/custom-component/picture/Attr.vue
@@ -5,25 +5,29 @@ import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapsho
 
 import { storeToRefs } from 'pinia'
 import { ElIcon, ElMessage } from 'element-plus-secondary'
-import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
+import { ref, onMounted, onBeforeUnmount, watch, PropType, reactive, toRefs, computed } from 'vue'
 import { beforeUploadCheck, uploadFileResult } from '@/api/staticResource'
 import { imgUrlTrans } from '@/utils/imgUtils'
 import eventBus from '@/utils/eventBus'
 import ImgViewDialog from '@/custom-component/ImgViewDialog.vue'
+import DatasetSelect from '@/views/chart/components/editor/dataset-select/DatasetSelect.vue'
+import Icon from '../../components/icon-custom/src/Icon.vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import { cloneDeep } from 'lodash-es'
+import FilterTree from '@/views/chart/components/editor/filter/FilterTree.vue'
+const { t } = useI18n()
 
-withDefaults(
-  defineProps<{
-    themes?: EditorTheme
-  }>(),
-  {
-    themes: 'dark'
+const props = defineProps({
+  themes: {
+    type: String as PropType<EditorTheme>,
+    default: 'dark'
   }
-)
+})
 
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
 
-const { curComponent } = storeToRefs(dvMainStore)
+const { curComponent, canvasViewInfo } = storeToRefs(dvMainStore)
 
 const fileList = ref([])
 const dialogImageUrl = ref('')
@@ -31,6 +35,23 @@ const dialogVisible = ref(false)
 const uploadDisabled = ref(false)
 const files = ref(null)
 const maxImageSize = 15000000
+const datasetSelector = ref(null)
+const filterTree = ref(null)
+const state = reactive({})
+
+const addDsWindow = () => {
+  // do addDs
+}
+
+const doUpdate = () => {
+  // do update
+}
+const view = computed(() =>
+  curComponent.value ? canvasViewInfo.value[curComponent.value.id] : null
+)
+const dsSelectedShow = computed(
+  () => curComponent.value.propValue?.pictureAttr?.showType === 'dataset' && view.value
+)
 
 const handlePictureCardPreview = file => {
   dialogImageUrl.value = file.url
@@ -82,6 +103,26 @@ const init = () => {
   }
 }
 
+const openTreeFilter = () => {
+  filterTree.value.init(cloneDeep(view.value.customFilter))
+}
+
+const isFilterActive = computed(() => {
+  return !!view.value?.customFilter?.items?.length
+})
+
+const changeFilterData = customFilter => {
+  view.value.customFilter = cloneDeep(customFilter)
+}
+
+const toolTip = computed(() => {
+  return props.themes === 'dark' ? 'ndark' : 'dark'
+})
+
+const removeCustomFilter = () => {
+  view.value.customFilter = {}
+}
+
 watch(
   () => curComponent.value.propValue.url,
   () => {
@@ -181,6 +222,69 @@ onBeforeUnmount(() => {
             </el-radio-group>
           </el-form-item>
         </el-row>
+
+        <template v-if="curComponent.propValue.pictureAttr.showType">
+          <el-row class="pic-adaptor" v-if="curComponent.propValue?.pictureAttr?.showType">
+            <el-form-item
+              class="form-item"
+              label="图片显示"
+              size="small"
+              :effect="themes"
+              :class="'form-item-' + themes"
+            >
+              <el-radio-group
+                size="small"
+                v-model="curComponent.propValue.pictureAttr.showType"
+                @change="onStyleChange"
+                :effect="themes"
+              >
+                <el-radio label="common" :effect="themes">显示</el-radio>
+                <el-radio label="dataset" :effect="themes">绑定数据集</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-row>
+          <el-row class="pic-adaptor" v-if="dsSelectedShow">
+            <dataset-select
+              ref="datasetSelector"
+              v-model="view.tableId"
+              style="flex: 1"
+              :view-id="view.id"
+              :state-obj="state"
+              :themes="themes"
+              @add-ds-window="addDsWindow"
+              @on-dataset-change="doUpdate"
+            />
+          </el-row>
+          <el-row class="padding-lr drag-data no-top-border no-top-padding">
+            <div class="form-draggable-title">
+              <span>
+                {{ t('chart.result_filter') }}
+              </span>
+              <el-tooltip :effect="toolTip" placement="top" :content="t('common.delete')">
+                <el-icon
+                  class="remove-icon"
+                  :class="{ 'remove-icon--dark': themes === 'dark' }"
+                  size="14px"
+                  @click="removeCustomFilter"
+                >
+                  <Icon class-name="inner-class" name="icon_delete-trash_outlined" />
+                </el-icon>
+              </el-tooltip>
+            </div>
+            <div
+              class="tree-btn"
+              :class="{ 'tree-btn--dark': themes === 'dark', active: isFilterActive }"
+              @click="openTreeFilter"
+            >
+              <el-icon>
+                <Icon class="svg-background" name="icon-filter"></Icon>
+              </el-icon>
+
+              <span>{{ $t('chart.filter') }}</span>
+            </div>
+          </el-row>
+          <FilterTree ref="filterTree" @filter-data="changeFilterData" />
+        </template>
       </el-collapse-item>
     </CommonAttr>
   </div>
@@ -304,4 +408,46 @@ onBeforeUnmount(() => {
     margin-right: 4px !important;
   }
 }
+
+.drag-data {
+  padding-top: 8px;
+  padding-bottom: 16px;
+
+  .tree-btn {
+    width: 100%;
+    margin-top: 8px;
+    background: #fff;
+    height: 32px;
+    border-radius: 4px;
+    border: 1px solid #dcdfe6;
+    display: flex;
+    color: #cccccc;
+    align-items: center;
+    cursor: pointer;
+    justify-content: center;
+    font-size: 12px;
+    &.tree-btn--dark {
+      background: rgba(235, 235, 235, 0.05);
+      border-color: #5f5f5f;
+    }
+
+    &.active {
+      color: #3370ff;
+      border-color: #3370ff;
+    }
+  }
+
+  &.no-top-border {
+    border-top: none !important;
+  }
+  &.no-top-padding {
+    padding-top: 0 !important;
+  }
+  &:nth-child(n + 2) {
+    border-top: 1px solid @side-outline-border-color;
+  }
+  &:first-child {
+    border-top: none !important;
+  }
+}
 </style>