Ionic image loading tips

Question

I'm just playing around with Ionic and Vue 3.

But when I use the ion-img tag, the images loaded from the assets folder are not displayed correctly.

Folder structure:

- assets
-- logo.svg
- views
-- Authentication.vue

When I load the image using standard HTML img it works fine, but not when using ion-img.

<ion-row>
      <img src="../assets/logo.svg"/>
      <ion-img src="../assets/logo.svg"></ion-img>
</ion-row>

I have tried the following different src paths:

./assets/logo.svg
../assets/logo.svg
../../assets/logo.svg (unreasonable, but I tried it too)
~/assets/logo.svg

Any suggestions on this?

Answer 1

Check out this answer:

How to reference static resources in vue javascript

In short, you can get the results you want by:

<ion-img :src="require('../assets/logo.svg')" />