feat: 优化Mappop和LPImage组件，处理图片加载错误；更新eslint配置，忽略lottie资源目录

eslint.config.js

@@ -1,62 +1,63 @@
-import antfu from '@antfu/eslint-config'
-
-export default antfu(
-  {},
-  {
-    ignores: [
-      'dist',
-      'node_modules',
-      '.output',
-      '.nuxt',
-      'content/posts',
-      'data',
-      'uno.config.ts',
-    ],
-  },
-  {
-    rules: {
-      'node/prefer-global/process': 'off',
-      'no-console': 'off',
-			'style/no-tabs': 'off',
-			'style/quote-props': 'off',
-			'vue/html-indent': 'off',
-			'style/indent': 'off',
-			'node/prefer-global/process': 'off',
-			'node/prefer-global/buffer': 'off',
-			'unused-imports/no-unused-vars': 'off',
-			'vue/singleline-html-element-content-newline': 'off',
-			'ts/no-use-before-define': 'off',
-			'no-empty-pattern': 'off',
-			'vue/eqeqeq': 'off',
-			'ts/no-unsafe-function-type': 'off',
-			'unicorn/no-new-array': 'off',
-			'ts/no-unused-expressions': 'off',
-			'regexp/no-unused-capturing-group': 'off',
-			'regexp/no-legacy-features': 'off',
-			'eqeqeq': 'off',
-			'no-empty': 'off',
-			'node/handle-callback-err': 'off',
-			'no-case-declarations': 'off',
-			'style/no-mixed-spaces-and-tabs': 'off',
-			'no-dupe-keys': 'off',
-			'regexp/no-dupe-disjunctions': 'off',
-			'sort-imports': 'off',
-			'unicorn/prefer-dom-node-text-content': 'off',
-			'vue/no-use-v-if-with-v-for': 'off',
-			'vue/no-unused-refs': 'off',
-			'array-callback-return': 'off',
-			'regexp/no-dupe-disjunctions': 'off',
-			'vue/require-v-for-key': 'off',
-			'import/order': 'off',
-    },
-  },
-  {
-    files: [
-      '*.d.ts',
-    ],
-    rules: {
-      'unused-imports/no-unused-vars': 'off',
-      'eslint-comments/no-unlimited-disable': 'off',
-    },
-  },
-)
+import antfu from '@antfu/eslint-config'
+
+export default antfu(
+  {},
+  {
+    ignores: [
+      'dist',
+      'node_modules',
+      '.output',
+      '.nuxt',
+      'content/posts',
+      'data',
+      'uno.config.ts',
+			'src/assets/lottie',
+    ],
+  },
+  {
+    rules: {
+      'node/prefer-global/process': 'off',
+      'no-console': 'off',
+			'style/no-tabs': 'off',
+			'style/quote-props': 'off',
+			'vue/html-indent': 'off',
+			'style/indent': 'off',
+			'node/prefer-global/process': 'off',
+			'node/prefer-global/buffer': 'off',
+			'unused-imports/no-unused-vars': 'off',
+			'vue/singleline-html-element-content-newline': 'off',
+			'ts/no-use-before-define': 'off',
+			'no-empty-pattern': 'off',
+			'vue/eqeqeq': 'off',
+			'ts/no-unsafe-function-type': 'off',
+			'unicorn/no-new-array': 'off',
+			'ts/no-unused-expressions': 'off',
+			'regexp/no-unused-capturing-group': 'off',
+			'regexp/no-legacy-features': 'off',
+			'eqeqeq': 'off',
+			'no-empty': 'off',
+			'node/handle-callback-err': 'off',
+			'no-case-declarations': 'off',
+			'style/no-mixed-spaces-and-tabs': 'off',
+			'no-dupe-keys': 'off',
+			'regexp/no-dupe-disjunctions': 'off',
+			'sort-imports': 'off',
+			'unicorn/prefer-dom-node-text-content': 'off',
+			'vue/no-use-v-if-with-v-for': 'off',
+			'vue/no-unused-refs': 'off',
+			'array-callback-return': 'off',
+			'regexp/no-dupe-disjunctions': 'off',
+			'vue/require-v-for-key': 'off',
+			'import/order': 'off',
+    },
+  },
+  {
+    files: [
+      '*.d.ts',
+    ],
+    rules: {
+      'unused-imports/no-unused-vars': 'off',
+      'eslint-comments/no-unlimited-disable': 'off',
+    },
+  },
+)

src/components/LPImage/index.vue

@@ -2,6 +2,7 @@
 import { isEmpty } from '@iceywu/utils'
 import { decode } from 'blurhash'
 import * as LivePhotosKit from 'livephotoskit'
+import loadErrorData from '~/assets/lottie/img_err.json'
 import { getDataUrlFromArr } from '~/utils/blurhash'
 
 interface LPImageProps {
@@ -166,6 +167,11 @@ const loadingImgSrc = computed(() => {
 const showImgSrc = computed(() => {
 	return isShowBase ? imgInfo.value.baseSrc : imgInfo.value.src
 })
+const loadError = ref(false)
+function onLoadErrorPreImg(e: any) {
+	console.log('💗onLoadErrorPreImg---------->', e)
+	loadError.value = true
+}
 </script>
 
 <template>
@@ -191,6 +197,7 @@ const showImgSrc = computed(() => {
 			:src="loadingImgSrc"
 			:loading="lazyload"
 			@load="onLoadPreImg"
+			@error="onLoadErrorPreImg"
 		>
 
 		<img
@@ -205,6 +212,9 @@ const showImgSrc = computed(() => {
 			:src="showImgSrc"
 			@load="onLoad"
 		>
+		<div v-if="loadError" class="leff-0 absolute top-0 z-9 h-full w-full fcc">
+			<Lottie width="20em" height="20em" :json-data="loadErrorData" />
+		</div>
 	</div>
 </template>
 

src/components/Mappop.vue

@@ -38,7 +38,6 @@ function handleClosePop() {
   emit('closePop')
 }
 function showImgs(index: number) {
-  // eslint-disable-next-line array-callback-return
   const images = fileList.value.map((item: any) => {
     const { fileType, file, cover } = item || {}
     if (fileType === 'IMAGE') {