处理图片引入

src/utils/utils.ts

@@ -20,13 +20,24 @@ export const renderIcon = (icon: any, set = {}) => {
 }
 
 /**
- * * 处理 vite 中无法使用 require 的问题
+ * * 处理 vite 中无法使用 require 的问题，utils 文件为根路径
+ * @param path
  * @param name
  * @returns url
  */
 export const requireUrl = (path: string, name: string) => {
   return new URL(`${path}/${name}`, import.meta.url).href
 }
+/**
+ * * 获取错误处理图片，默认 404 图
+ * @param path
+ * @param name
+ * @returns url
+ */
+export const requireFallbackImg = (path?: string, name?: string) => {
+  const url = path && name
+  return new URL(url?`${path}/${name}`: '../assets/images/exception/image-404.png', import.meta.url).href
+}
 
 export const screenfullFn = (isFullscreen?: boolean, isEnabled?: boolean) => {
   // 是否是全屏

src/views/login/index.vue

@@ -192,7 +192,7 @@ const bgList = ref([
 
 // 处理url获取
 const getImageUrl = (name: string, folder: string) => {
-  return requireUrl(`../assets/images/${folder}`, `${name}.png`)
+  return requireUrl(`../assets/images/${folder}/`, `${name}.png`)
 }
 
 // 打乱

src/views/project/items/components/Card/index.vue

@@ -16,8 +16,11 @@
             object-fit="contain"
             height="200"
             preview-disabled
-            :src="requireUrl('.', '20211219181327.png')"
+            :src="
+              requireUrl('../assets/images/project', 'moke-20211219181327.png')
+            "
             :alt="cardData.title"
+            :fallback-src="requireFallbackImg()"
           />
         </div>
       </div>
@@ -76,12 +79,12 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { renderIcon, goDialog } from '@/utils'
+import { renderIcon, goDialog, requireUrl, requireFallbackImg } from '@/utils'
 import { icon } from '@/plugins'
 import { AppleControlBtn } from '@/components/AppleControlBtn'
 import { useMessage, useDialog } from 'naive-ui'
 import { DialogEnum } from '@/enums/pluginEnum'
-import { DialogReactive } from 'naive-ui'
+
 const {
   EllipsisHorizontalCircleSharpIcon,
   CopyIcon,
@@ -160,10 +163,6 @@ const handleSelect = (key: string) => {
   console.log(key)
 }
 
-const requireUrl = (path: string, name: string) => {
-  return new URL(`${path}/${name}`, import.meta.url).href
-}
-
 // 删除处理
 const deleteHanlde = () => {
   goDialog({

src/views/project/items/components/ModalCard/index.vue

@@ -14,7 +14,12 @@
           <!-- 中间 -->
           <div class="list-content-img">
             <img
-              :src="requireUrl('.', '20211219181327.png')"
+              :src="
+                requireUrl(
+                  '../assets/images/project',
+                  'moke-20211219181327.png'
+                )
+              "
               :alt="cardData?.title"
             />
           </div>
@@ -58,7 +63,7 @@
 </template>
 
 <script setup lang="ts">
-import { renderIcon } from '@/utils'
+import { renderIcon, requireUrl, requireFallbackImg } from '@/utils'
 import { icon } from '@/plugins'
 import { AppleControlBtn } from '@/components/AppleControlBtn'
 const { HammerIcon } = icon.ionicons5
@@ -73,11 +78,6 @@ const props = defineProps({
 const handleSelect = (key: string) => {
   console.log(key)
 }
-
-const requireUrl = (path: string, name: string) => {
-  return new URL(`${path}/${name}`, import.meta.url).href
-}
-
 const fnBtnList = [
   {
     label: '编辑',