fix:修复md5图片不显示问题

src/components/ImageView.vue

@@ -5,12 +5,13 @@
     @mouseover="(ev) => mouseoverImg(ev, src)"
     @mouseover="(ev) => mouseoverImg(ev, src)"
     @mouseleave="mouseleaveImg"
     @mouseleave="mouseleaveImg"
   >
   >
-    <img :src="src" :style="imageStyle" />
+    <img :src="formatUrl" :style="imageStyle" />
   </div>
   </div>
 </template>
 </template>
 <script setup lang="ts">
 <script setup lang="ts">
 import useImagePreview from '@/utils/hooks/useImagePreview.'
 import useImagePreview from '@/utils/hooks/useImagePreview.'
 import { computed, defineProps } from 'vue'
 import { computed, defineProps } from 'vue'
+import { formatImgUrl } from '@/utils/hooks/commonUtil.ts'
 const props = defineProps({
 const props = defineProps({
   src: {
   src: {
     type: String,
     type: String,
@@ -31,6 +32,12 @@ const imageStyle = computed(() => {
     height: props.height,
     height: props.height,
   }
   }
 })
 })
+
+const formatUrl = computed(() => {
+  const w = Number(props.width.replace('px',''))
+  const h = Number(props.height.replace('px',''))
+  return formatImgUrl({url:props.src,w,h})
+})
 const { mouseoverImg, mouseleaveImg } = useImagePreview()
 const { mouseoverImg, mouseleaveImg } = useImagePreview()
 </script>
 </script>
 <style lang="scss" scoped>
 <style lang="scss" scoped>

src/utils/hooks/commonUtil.ts

+import {md5} from 'js-md5'
 export type AnyObject = {
 export type AnyObject = {
   [propName: string]: string | number | boolean | undefined | unknown
   [propName: string]: string | number | boolean | undefined | unknown
 }
 }
@@ -145,3 +146,65 @@ export function checkUpdateParams(
   }
   }
   return params
   return params
 }
 }
+
+/**
+ * 图片下载地址
+ * w=width&h=height&g=isgray&x=position_x&y=position_y&r=rotate&q=quality&f=format
+ * @param {*} url
+ * @param {Object} options
+ * @param {Number} options.w -width
+ * @param {Number} options.w -height
+ * @param {0 | 1}  options.g -isgray 灰色
+ * @param {Number} options.x -position_x
+ * @param {Number} options.y -position_y
+ * @param {Number} options.r -rotate 旋转
+ * @param {Number} options.f - 格式
+ * @param {Number} options.q -quality 质量
+ * @param {'jpeg' | 'png' | 'gif' | 'jeg'} options.f -format
+ * @returns String
+ */
+
+interface formatOption{
+  url:string
+  w?:number
+  h?:number
+  others?:never
+  options?:never
+}
+// 图片地址格式化
+export function formatImgUrl(option:formatOption): string {
+  const {url,w,h,others} = option
+  let imagePath = ''
+  let query = ''
+  if (w) {
+    query += query ? '&w=' : 'w=' + Math.floor(w);
+  }
+  if (h) {
+    query += query ? '&h=' : 'h=' + Math.floor(h);
+  }
+  if(others){
+    Object.keys(others).forEach(key => {
+      query += `${query ? '&' : ''}${key}=${others[key]}`;
+    });
+  }
+
+  const zImgPath = `${location.origin}${
+    location.host.indexOf('test') !== -1 || location.protocol == 'http:'
+      ? '/erpimg/'
+      : ''
+  }`
+  if(url.startsWith('http')) {
+    return url
+  }else if(url.startsWith('/')) {
+    return window.location + url
+  } else {
+    if ('42f2b26039d7fd526b8a1d50bb329cbc' === md5(location.host)) {
+      imagePath = zImgPath + '/erpimg/'+ url
+    } else if (zImgPath.indexOf('/erpimg') !== -1) {
+      imagePath = zImgPath +url
+    } else {
+      imagePath = 'https://image.jomalls.com/'+ url + (query ? '?' : '') + query
+    }
+    return imagePath
+  }
+}