【分类】图片回显增加地址校验

src/components/pic-upload/index.vue

@@ -12,7 +12,7 @@
       <img
         v-if="modelValue"
         alt=""
-        :src="resourcesUrl + modelValue"
+        :src="checkFileUrl(modelValue)"
         class="pic"
       >
       <el-icon
@@ -27,6 +27,7 @@
 </template>
 
 <script setup>
+import { checkFileUrl } from '@/utils'
 import $cookie from 'vue-cookies'
 import { ElMessage } from 'element-plus'
 const uploadHeaders = { Authorization: $cookie.get('Authorization') }
@@ -39,7 +40,6 @@ const props = defineProps({
     type: String
   }
 })
-const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
 /**
  * 图片上传
  */

src/utils/index.js

@@ -87,3 +87,23 @@ export function idList (data, val, id = 'id', children = 'children') {
   idListFromTree(data, val, res, id)
   return res
 }
+
+/**
+ * 文件地址校验
+ * @param fileUrl 获取到的文件路径
+ */
+export function checkFileUrl (fileUrl) {
+  if (fileUrl === '') return ''
+  const baseUrl = import.meta.env.VITE_APP_RESOURCES_URL
+  // 适配el-image 图片组件预览功能
+  if (fileUrl && typeof fileUrl === 'object') {
+    // eslint-disable-next-line no-return-assign
+    return fileUrl.map(el => el = checkFileUrl(el))
+  } else {
+    if (fileUrl && fileUrl.indexOf('http') === -1) {
+      return baseUrl + fileUrl
+    } else {
+      return fileUrl
+    }
+  }
+}

src/views/modules/prod/category/index.vue

@@ -37,7 +37,7 @@
         <template #default="scope">
           <img
             alt=""
-            :src="resourcesUrl + scope.row.pic "
+            :src="checkFileUrl(scope.row.pic)"
           >
         </template>
       </el-table-column>
@@ -99,10 +99,9 @@
 </template>
 
 <script setup>
-import { isAuth, treeDataTranslate } from '@/utils'
+import { checkFileUrl, isAuth, treeDataTranslate } from '@/utils'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import AddOrUpdate from './add-or-update.vue'
-const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
 const dataForm = ref({})
 
 onMounted(() => {