使用 cover.png 进行展示

ybscypress · Feb 27, 2020 · ef5f7f1 · ef5f7f1
1 parent 37ccbbd
commit ef5f7f1
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/src/components/widget/ComponentInfo.vue b/src/components/widget/ComponentInfo.vue
@@ -3,7 +3,7 @@
     <div v-if='info'>
       <div class="title">
         <div class="icon">
-          <img :src="getIcon(info)" alt="">
+          <img @error="imgError($event)" :src="getIcon(info)" alt="">
         </div>
         <div class="info">
           <div class="name">{{info.name}}</div>
@@ -147,9 +147,14 @@
     },
     methods: {
       getIcon: function (params) {
-        let url = params.path.replace(/index.js$/, 'icon.png')
+        let url = params.path.replace(/index.js$/, 'cover.png')
         return url
       },
+      imgError (ev = {}) {
+        const target = ev.target || {}
+        const src = target.src
+        if (/cover.png$/.test(src)) target.src = src.replace(/cover.png$/, 'icon.png')
+      },
       loadMd: function (com) {
         let url = com.path.replace(/index.js$/, 'README.md')
         this.loading = true

diff --git a/src/components/widget/Components.vue b/src/components/widget/Components.vue
@@ -46,7 +46,7 @@
         @click="addOne(com)"
       >
         <div class="com-item-avatar">
-          <img :src="com.path | componentIcon" class="icon-img" />
+          <img @error="imgError($event)" :src="com.path | componentIcon" class="icon-img" />
         </div>
         <div class="com-item-content">
           <p class="com-item-name">{{com.name}}</p>
@@ -258,7 +258,7 @@
     },
     filters: {
       componentIcon: function (path) {
-        return !path ? 'https://imagecdn.ymm56.com/ymmfile/explore-biz/ymm_1527843621175.png' : path.replace(/index.js$/, 'icon.png')
+        return !path ? 'https://imagecdn.ymm56.com/ymmfile/explore-biz/ymm_1527843621175.png' : path.replace(/index.js$/, 'cover.png')
       }
     },
     data: function () {
@@ -299,6 +299,11 @@
       this.ema.bind('components.refresh', this.search)
     },
     methods: {
+      imgError (ev = {}) {
+        const target = ev.target || {}
+        const src = target.src
+        if (/cover.png$/.test(src)) target.src = src.replace(/cover.png$/, 'icon.png')
+      },
       onTagSelect (tags) {
         this.selectedTags = tags
         this.search()