Search code examples
androidlaravelvue.jsquasar

Image not displayed on some devices (Using Quasar Framework)

I am trying to display an mage posted to the server, however the image on shows on browser and some device on my android device Huawei P30 is not showing and when i copy the link to the browser the image is the is valid.

here is my code

<q-img
  :src="blogPost.image_url"
  :srcset="blogPost.image_url"
>
  <template v-slot:loading>
     <div class="text-subtitle1 text-white">
          <q-spinner-ios color="primary" />
             <div class="q-mt-md">Loading...</div>
     </div>
  </template>  
  <template v-slot:error>
    <div class="absolute-full flex flex-center bg-negative text-white">
        cannot display image
    </div>
  </template>

when i run the application some android phone the image shows perfectly but on my phone it doesn't. i have tried to use the normal img tag from html still the same issue.

Solution

  • Finally got the answer the problem was not about cordova, Vuejs, and Quasar, i have figured out that some devices have extra security layer where by the would only allow to serve request or render images coming a secured server so my problem was that i was returning the image URL over HTTP instead of HTTPS.