diff --git a/src/assets/images/exception/image-404.png b/src/assets/images/exception/image-404.png new file mode 100644 index 00000000..443045b9 Binary files /dev/null and b/src/assets/images/exception/image-404.png differ diff --git a/src/assets/images/project/moke-20211219181327.png b/src/assets/images/project/moke-20211219181327.png new file mode 100644 index 00000000..7be19aa3 Binary files /dev/null and b/src/assets/images/project/moke-20211219181327.png differ diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 17b94885..12b22980 100644 --- a/src/utils/utils.ts +++ b/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) => { // 是否是全屏 diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 4a74b54f..c1436f67 100644 --- a/src/views/login/index.vue +++ b/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`) } // 打乱 diff --git a/src/views/project/items/components/Card/index.vue b/src/views/project/items/components/Card/index.vue index a2712e57..2260227c 100644 --- a/src/views/project/items/components/Card/index.vue +++ b/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()" /> @@ -76,12 +79,12 @@