qimg :src"https://image.png" doesn't work

What happened?

I am currently using quasar2 with vue3 and here is the scenario: Why when I put <img src="https://images.png" /> does it display an image and when I put <q-img src="https://images.png" /> the image does not s not display?

Does Qimg only process images locally?

thank you very much for your answer

What did you expect to happen?

Qimg should display url image from external resource

Reproduction URL

https://codesandbox.io/s/q-img-src-1r1evc

How to reproduce?

1. Select a page
2. Make axios request
3. pass the result data url inside qimg src
4. Image don’t display

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

SPA Mode

Platforms/Browsers

Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[MilosPaunovic]

The problem is that you are using wrong piece of data - when you fetch images, you get array of objects, and the property download_url of every image is the one you’ll need to use and, you need to pass either height or width to your QImg component.

So, if you change it to:

<q-img :src="image.download_url" width="200px"></q-img>

it will render just fine.

[AndrianD]

Thank you very much for your answer!