Merge pull request #179 from ProgrammingLab/fukusan/image-x

ImgXコンポーネントを作ってみた

Author: gedorinku

src/components/ImgX.vue

@@ -0,0 +1,28 @@
+<template>
+  <img :src="src ? src : require('@/assets/no_image.png')" :srcset="srcset" :alt="alt">
+</template>
+<script>
+export default {
+  props: {
+    src: {
+      type: String,
+    },
+    media: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    alt: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    srcset() {
+      if (!this.src) return '';
+      return this.media.map(({ pixelRatio, size }) => `${this.src}_${size} ${pixelRatio}`).join(',');
+    },
+  },
+};
+</script>

src/components/PublicMemberList.vue

@@ -4,8 +4,14 @@
     <ul class="member-list">
       <li v-for="member in filteredList" :key="member.user_id">
         <router-link :to="{ name: 'profile', params: { name: member.name }}">
-          <img :src="member.icon_url ?
-          `${member.icon_url}_64px` : require('@/assets/no_image.png')" alt="User Icon">
+          <ImgX
+            :src="member.icon_url"
+            :media="[
+              {pixelRatio: '1x', size: '64px'},
+              {pixelRatio: '2x', size: '128px'},
+            ]"
+            alt="User Icon"
+          />
           <dl>
             <dt class="name">{{member.display_name || member.name}}</dt>
             <dd class="role" v-if="member.role">{{member.role.name}}</dd>
@@ -81,6 +87,7 @@ dl {
 
 <script>
 import ErrorMessage from '@/components/ErrorMessage.vue';
+import ImgX from '@/components/ImgX.vue';
 import { mapState, mapActions, mapGetters } from 'vuex';
 
 export default {
@@ -93,6 +100,7 @@ export default {
   },
   components: {
     ErrorMessage,
+    ImgX,
   },
   data() {
     return {