图片根路径处理

src/components/Materials/src/Materials.vue

@@ -455,8 +455,8 @@ function sureUrls() {
   }
 }
 
-const convertedImageUrl = (url: string) => {
-  return convertImageUrl(url);
+const convertedImageUrl = (url) => {
+  return convertImageUrl(url)
 }
 </script>
 

src/directives/image/index.ts

@@ -0,0 +1,32 @@
+import type { App, Directive } from 'vue'
+import { convertImageUrl } from '@/utils/image-helper'
+
+/**
+ * 图片URL处理指令
+ * 使用方法：v-image="imageUrl"
+ * 或者：v-image:[属性名]="imageUrl" 例如 v-image:src="imageUrl"
+ */
+export const imageDirective: Directive = {
+  mounted(el, binding) {
+    const attributeName = binding.arg || 'src'
+    const url = binding.value
+
+    if (url) {
+      const convertedUrl = convertImageUrl(url)
+      el.setAttribute(attributeName, convertedUrl)
+    }
+  },
+  updated(el, binding) {
+    const attributeName = binding.arg || 'src'
+    const url = binding.value
+
+    if (url) {
+      const convertedUrl = convertImageUrl(url)
+      el.setAttribute(attributeName, convertedUrl)
+    }
+  }
+}
+
+export function setupImageDirective(app: App) {
+  app.directive('image', imageDirective)
+}

src/directives/index.ts

@@ -1,13 +1,17 @@
 import type { App } from 'vue'
 import { hasRole } from './permission/hasRole'
 import { hasPermi } from './permission/hasPermi'
+import { setupPermissionDirective } from './permission'
+import { setupImageDirective } from './image'
 
 /**
  * 导出指令：v-xxx
  * @methods hasRole 用户权限，用法: v-hasRole
  * @methods hasPermi 按钮权限，用法: v-hasPermi
  */
-export const setupAuth = (app: App<Element>) => {
+export function setupAuth(app: App<Element>) {
   hasRole(app)
   hasPermi(app)
+  setupPermissionDirective(app)
+  setupImageDirective(app)
 }

src/main.ts

@@ -46,6 +46,9 @@ import VueDOMPurifyHTML from 'vue-dompurify-html' // 解决v-html 的安全隐
 // 导入全局图片组件
 import AppImage from '@/components/common/AppImage.vue'
 
+// 导入图片处理指令
+import { setupImageDirective } from '@/directives/image'
+
 // 创建实例
 const setupAll = async () => {
   const app = createApp(App)
@@ -68,6 +71,9 @@ const setupAll = async () => {
   // 注册全局图片组件
   app.component('AppImage', AppImage)
 
+  // 注册图片处理指令
+  setupImageDirective(app)
+
   await router.isReady()
 
   app.use(VueDOMPurifyHTML)