Merge pull request #183 from silinternational/fix-image-imports

fix inconsistent image loading

installed-versions.json

@@ -1,5 +1,5 @@
 {
-  "version": "7.0.0",
+  "version": "7.0.1",
   "name": "idp-profile-ui",
   "dependencies": {
     "@sentry/vue": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "idp-profile-ui",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "type": "module",
   "engines": {
     "node": ">=18.0.0 <19.0.0"

src/2sv/key/Insert.vue

@@ -9,7 +9,7 @@
       </template>
 
       <figure v-if="isSupported" class="pa-4">
-        <v-img contain src="@/assets/insert-usb-security-key.png" alt="A usb key inserted into a usb port." />
+        <v-img contain :src="usbKey" alt="A usb key inserted into a usb port." />
       </figure>
       <p v-else>{{ $vuetify.lang.t('$vuetify.2sv.key.insert.nosupport.info') }}</p>
 
@@ -55,6 +55,7 @@
 import ProfileWizard from '@/profile/ProfileWizard.vue'
 import { browserSupportsWebAuthn } from '@simplewebauthn/browser'
 import { newKeyName, mfa } from '@/global/mfa'
+import usbKey from '@/assets/insert-usb-security-key.png'
 
 export default {
   components: {
@@ -67,6 +68,7 @@ export default {
     newKeyName,
     snackbarIsOpen: false,
     snackBarMessage: '',
+    usbKey: usbKey,
   }),
   methods: {
     onOk: function () {

src/2sv/key/Intro.vue

@@ -10,7 +10,7 @@
       </p>
 
       <figure class="pa-4">
-        <v-img src="@/assets/usb-security-key-examples.png" contain alt="Three sizes of USB keys." />
+        <v-img :src="securityKeys" contain alt="Three sizes of USB keys." />
       </figure>
     </BasePage>
 
@@ -40,10 +40,14 @@
 
 <script>
 import ProfileWizard from '@/profile/ProfileWizard.vue'
+import securityKeys from '@/assets/usb-security-key-examples.png'
 
 export default {
   components: {
     ProfileWizard,
   },
+  data: () => ({
+    securityKeys,
+  }),
 }
 </script>

src/2sv/key/Touch.vue

@@ -16,12 +16,7 @@
       </p>
 
       <figure class="pa-4 d-flex flex-column">
-        <v-img
-          v-if="!touched"
-          contained
-          src="@/assets/touch-usb-security-key.png"
-          alt="A finger touching the top of a usb key."
-        />
+        <v-img v-if="!touched" contained :src="usbKey" alt="A finger touching the top of a usb key." />
         <v-icon v-else color="success" x-large>mdi-check</v-icon>
       </figure>
     </BasePage>
@@ -56,6 +51,7 @@
 import ProfileWizard from '@/profile/ProfileWizard.vue'
 import { browserSupportsWebAuthn, startRegistration } from '@simplewebauthn/browser'
 import { add, verifyWebauthn, newKeyName } from '@/global/mfa'
+import usbKey from '@/assets/touch-usb-security-key.png'
 
 let absTimeout
 
@@ -68,6 +64,7 @@ export default {
     touched: false,
     error: false,
     isSupported: browserSupportsWebAuthn(),
+    usbKey,
   }),
   async created() {
     this.create()

src/2sv/smartphone/DownloadApp.vue

@@ -10,8 +10,8 @@
       </p>
 
       <figure class="d-flex align-center justify-center pb-4 my-4">
-        <img v-if="isAuthy" src="@/assets/authy-logo.jpg" />
-        <img v-else src="@/assets/authenticator-logo.jpg" />
+        <img v-if="isAuthy" :src="authy" />
+        <img v-else :src="authenticator" />
 
         <figcaption class="headline ml-4">
           {{ $vuetify.lang.t(`$vuetify.2sv.smartphone.download.appname-${preferredAppName}`) }}
@@ -20,10 +20,10 @@
 
       <figure class="badges d-flex align-center justify-center">
         <a :href="`https://play.google.com/store/apps/details?id=${playStoreId}`" target="_blank" class="pr-4">
-          <img src="@/assets/google-play-badge.png" />
+          <img :src="playBadge" />
         </a>
         <a :href="`https://itunes.apple.com/us/app/${itunesAppUrl}`" target="_blank">
-          <img src="@/assets/app-store-badge.png" />
+          <img :src="appStoreBadge" />
         </a>
       </figure>
     </BasePage>
@@ -44,11 +44,21 @@
 
 <script>
 import ProfileWizard from '@/profile/ProfileWizard.vue'
+import authy from '@/assets/authy-logo.jpg'
+import authenticator from '@/assets/authenticator-logo.jpg'
+import playBadge from '@/assets/google-play-badge.png'
+import appStoreBadge from '@/assets/app-store-badge.png'
 
 export default {
   components: {
     ProfileWizard,
   },
+  data: () => ({
+    authy,
+    authenticator,
+    playBadge,
+    appStoreBadge,
+  }),
   computed: {
     isAuthy: () => import.meta.env.VITE_TOTP_APP_RECOMMENDATION === 'authy',
     preferredAppName: (vm) => (vm.isAuthy ? 'authy' : 'authenticator'),

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app>
     <v-app-bar app color="primary">
-      <a href="/"><img src="@/assets/logo.png" /></a>
+      <a href="/"><img :src="logo" /></a>
 
       <v-spacer />
 
@@ -49,12 +49,14 @@
 
 <script>
 import HelpButton from './help/HelpButton.vue'
+import logo from '@/assets/logo.png'
 export default {
   components: {
     HelpButton,
   },
   data: () => ({
     message: '',
+    logo,
   }),
   computed: {
     mobile() {

src/global/PageNotFound.vue

@@ -4,6 +4,15 @@
       {{ $vuetify.lang.t('$vuetify.pageNotFound.header') }}
     </template>
 
-    <img src="@/assets/riddler-geeky-world.jpg" />
+    <img :src="questionImage" />
   </BasePage>
 </template>
+
+<script>
+import questionImage from '@/assets/riddler-geeky-world.jpg'
+export default {
+  data: () => ({
+    questionImage,
+  }),
+}
+</script>