With Quasar, images are displayed in the browser but not in the emulator (or actual phone)-CodePudding

I've written some Vue 3 code which works well in the browser but not in the emulator (for Android or iPhone) or on the actual phones.

The code loops through (v-for) a list of jpegs (1 to 3 currently) and displays the image, like this:

<template>       
   <div v-for="contact in contactDetails.contacts"
            :key="contact.id">
            <div><img :src="getImage(contact.id)"  alt=""       style="height: 300px"></div>
   </div>
</template>

<script setup>
  const getImage = (imageData) =>{
  return `src/assets/${imageData}.jpeg`
</script>

As I said, the above (slightly truncated code) works on the browser but not on the emulators or the actual phones.

I have looked around on the web but can't find the solution. Guidance will be appreciated.

CodePudding user response：

So ... I fixed it.

The most important thing is that in Quasar your images have to be in, or in a folder under, the public folder.

Getting the path correct was a little bit difficult for me but the console would give clues on where it was looking (where it would give an error message along the lines of GET https://local/host/.../image.jpg or whatever).

I didn't have to do the fancy schmancy inserting a function into the :src URL as above. So my code looks something like this:

<div v-for="contact in contactDetails.contacts"
        :key="contact.id">
    <div >{{ contact.service }}</div>
    <img  :src="`/${contact.imageURL}`" style="height:200px"/>
   </div>

CodePudding user response：

I faced the same thing. i had to generate bundles in order test them directly on the phone.