Quasar: Images are not displayed

[xereda]

Images are not displayed

Images do not appear with the application running on the actual "device". I'm testing on an iphone 5 (ios10.1) and the images are not displayed. This occurs apparently when the "src" of the image is dynamic.

Look at this:

in browser:

in iphone 5 real device:

Component source code:

<template>
  <div>
    <div slot="header" class="toolbar primary">
      <quasar-search v-model="search" class="primary"></quasar-search>
    </div>
    <div class="layout-padding">
      <div class="list item-delimiter">
        <router-link to="/detalhesMedico" tag="div" class="item three-lines" v-for="(medico, index) in listaComFiltro">
          <img class="item-primary" :src="getAvatarURL(medico.id)">
          <div class="item-content has-secondary">
            <div>{{ medico.nome }}</div>
            <div>
              <span>{{ medico.especializacao }}</span><br />
              (crm {{ medico.crm }})
            </div>
          </div>
          <div class="item-secondary stamp">
            {{ medico.dist }}
          </div>
          <i class="item-secondary">location_on</i>
        </router-link>

      </div>
    </div>

    <button @click="sendAllProviders()" class="negative circular shadow-3 absolute-bottom-right" style="right:20px; bottom:25px;"><i>done_all</i></button>

  </div>
</template>

<script>
import { Dialog, Toast } from 'quasar'
import { mapActions } from 'vuex'

export default {
  mounted () {
    this.setHeaderTitle('Por médico...')
  },
  data () {
    return {
      infiniteScrollOn: true,
      search: '',
      listaMedicos: [
        { id: 1, nome: 'Mauriano Salazar', especializacao: 'Cardiologia', crm: 5765, dist: '550 m' },
        { id: 2, nome: 'Paula Guimarães', especializacao: 'Cardiologia', crm: 21308, dist: '970 m' },
        { id: 3, nome: 'Sérgio Silva Souza', especializacao: 'Cardiologia', crm: 98123, dist: '1,1 km' }
        // { id: 4, nome: 'Felipe Schirmandt', especializacao: 'Cardiologia', crm: 66545, dist: '1,2 km' },
        // { id: 5, nome: 'Lizandra Hermann', especializacao: 'Cardiologia', crm: 97878, dist: '1,3 km' }
      ]
    }
  },
  methods: {
    ...mapActions([
      'setHeaderTitle'
    ]),
    getAvatarURL (id) {
      return '../statics/img/avatars/' + id + '.jpg'
    },
    sendAllProviders () {
      Dialog.create({
        title: 'Solicitar Agenda',
        message: 'Você deseja solicitar agenda para todos os médicos da lista?',
        buttons: [
          {
            label: 'Cancelar',
            handler () {
              console.log('Disagreed...')
            }
          },
          {
            label: 'Sim',
            handler () {
              console.log('Agreed!')
              Toast.create.positive('Solicitação enviada')
            }
          }
        ]
      })
    }
  },
  computed: {
    listaComFiltro () {
      return this.listaMedicos.filter((element) => {
        return element.nome.toUpperCase().indexOf(this.search.toUpperCase()) > -1
      })
    }
  }
}
</script>

Location of the images in the project:

[rstoenescu]

Does this happen on Android too? Did you change the publicPath in template's config? Take a read at http://quasar-framework.org/guide/app-handling-static-assets.html and please tell me if you still have the issue. Thanks!

[xereda]

I could not simulate on Android, because black screen error occurs (I opened another issue for this). The "dev.publicPath" property inside the "index.js" file is set to "/".

[rstoenescu]

@xereda the build.publicPath is of interest here.

[xereda]

But what amount do I report to the property? I left "/" and now the app is getting white screen on ios.

[rstoenescu]

Put empty string. And don't use Vue router's history mode.

[rstoenescu]

Please read: http://quasar-framework.org/guide/app-handling-static-assets.html
You need to understand how Webpack works so you can use statics. Don't have time now but will help you as soon as I can.

[xereda]

I solved that question. I used:

:src='./statics/img/avatar.jpg'

That is, I added the point at the beginning of the dynamic paths.

[rstoenescu]

So it isn't an issue. Anyway, it should be :src=" 'statics/img/avatar.jpg' " so it will work from all src paths. Please reopen if there is something. Webpack is so convoluted at times, but you need to understand how it packs assets.

[xereda]

Ok! Its work!