展示图片

templates/vue/index.vue.j2

@@ -2,7 +2,7 @@
 /**
  * {{entity}}管理页面
  */
-import {ref, reactive, onMounted, watch} from 'vue';
+import {ref, reactive, onMounted, watch, h} from 'vue';
 import {useVbenVxeGrid} from '#/adapter/vxe-table';
 import {useVbenModal} from '@vben/common-ui';
 import {useVbenForm} from '#/adapter/form';
@@ -10,6 +10,8 @@ import dayjs from 'dayjs';
 import {columns} from './data';
 import {formSchema} from './form';
 import { {{entity}}Api } from '#/api/{{entity}}';
+import { Image } from 'ant-design-vue';
+
 
 // ========== 状态变量 ==========
 const currentRow = ref(null);
@@ -122,7 +124,89 @@ watch(
 // ========== 表格配置 ==========
 const gridOptions = {
   columns: [
-    ...columns,
+      ...columns.map(col => {
+        //带img，face，picture 关键词的字段，使用图片渲染
+        if (col.field.toLowerCase()?.indexOf("img")>-1
+          || col.field.toLowerCase()?.indexOf("face")>-1
+          || col.field.toLowerCase()?.indexOf("picture")>-1 ) {
+          return {
+            ...col,
+            width: 96,
+            align: 'center',
+            slots: {
+              default: ({ row }: any) => {
+                const imgUrl = row[col.field];
+                // 如果没有图片，显示提示文字
+                if (!imgUrl) {
+                  return h('div', {
+                    style: {
+                      display: 'flex',
+                      justifyContent: 'center',
+                      alignItems: 'center',
+                      height: '50px',
+                      color: '#999',
+                      fontSize: '12px'
+                    }
+                  }, '无图片');
+                }
+                // 判断是否是完整的 URL
+                let fullUrl = imgUrl;
+                if (!imgUrl.startsWith('http://') && !imgUrl.startsWith('https://')) {
+                  // 如果不是完整 URL，拼接基础 API 地址
+                  const apiURL = import.meta.env.VITE_GLOB_API_URL || '';
+                  fullUrl = `${apiURL}${imgUrl}`;
+                }
+                console.log('🖼️ 图片 URL:', fullUrl);
+                // 返回 Image 组件的 VNode
+                try {
+                  return h(Image, {
+                    src: fullUrl,
+                    height: 60,
+                    width: 80,
+                    preview: true,
+                    style: {
+                      borderRadius: '4px',
+                      objectFit: 'cover',
+                      cursor: 'pointer',
+                      boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+                    },
+                    onError: () => {
+                      console.error('❌ 图片加载失败:', fullUrl);
+                      return h('div', {
+                        style: {
+                          display: 'flex',
+                          justifyContent: 'center',
+                          alignItems: 'center',
+                          height: '50px',
+                          backgroundColor: '#f5f5f5',
+                          borderRadius: '4px',
+                          color: '#999',
+                          fontSize: '12px'
+                        }
+                      }, '加载失败');
+                    }
+                  });
+                } catch (error) {
+                  console.error('❌ 图片渲染错误:', error);
+                  return h('div', {
+                    style: {
+                      display: 'flex',
+                      justifyContent: 'center',
+                      alignItems: 'center',
+                      height: '50px',
+                      backgroundColor: '#fffbe6',
+                      borderRadius: '4px',
+                      color: '#faad14',
+                      fontSize: '12px'
+                    }
+                  }, '渲染失败');
+                }
+              }
+            }
+          };
+        }
+        return col;
+      }),
     {
       field: 'action',
       title: '操作',