Handle empty or missing icon

app/TwoFAccount.php

@@ -3,6 +3,7 @@
 namespace App;
 
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Support\Facades\Storage;
 
 class TwoFAccount extends Model
 {
@@ -16,4 +17,22 @@ class TwoFAccount extends Model
      * @var string
      */
     protected $table = 'twofaccounts';
+
+
+    /**
+     * Null empty icon resource has gone
+     *
+     * @param  string  $value
+     * @return string
+     */
+    public function getIconAttribute($value)
+    {
+
+        if( !Storage::exists('public/' . pathinfo($value)['basename']) ) {
+
+            return '';
+        }
+
+        return $value;
+    }
 }

resources/js/components/TwofaccountShow.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <figure class="image is-64x64" style="display: inline-block">
+        <figure class="image is-64x64" style="display: inline-block"  v-if="icon">
             <img :src="icon">
         </figure>
         <p class="is-size-4 has-text-grey-light">{{ service }}</p>

resources/js/views/Accounts.vue

@@ -4,7 +4,7 @@
             <div class="buttons are-large is-centered">
                 <span v-for="account in accounts" class="button is-black twofaccount" >
                     <span @click.stop="getAccount(account.id)">
-                        <img :src="account.icon">
+                        <img :src="account.icon" v-if="account.icon">
                         {{ account.service }}
                         <span class="is-family-primary is-size-7 has-text-grey">{{ account.account }}</span>
                     </span>

resources/js/views/Edit.vue

@@ -28,8 +28,8 @@
                                     <span class="file-label">Choose an image…</span>
                                 </span>
                             </label>
-                            <span class="tag is-black is-large" v-if="twofaccount.icon.length > 0">
+                            <span class="tag is-black is-large" v-if="twofaccount.icon">
-                                <img class="icon-preview" :src="twofaccount.icon" >
+                                <img class="icon-preview" :src="'../' + twofaccount.icon" >
                                 <button class="delete is-small" @click="deleteIcon"></button>
                             </span>
                         </div>