Image handling ionic vue

Ionic Framework Ionic Vue
1

I feel stupid to ask this but: How are images handled in an ionic vue project?

I have an image in/src/assets/img/myimage.jpg
And try to display with <ion-img src="/assets/img/badge.jpg"></ion-img>

But it doesn’t show.

I need to manually copy it to /public/assets/img/myimage.jpg for it to show.

Is this really how this is done? Is this not handled by ‘ionic serve’?

1 Like
2

I guess the basic vue concept still applies:

3

use like here

src="../../assets/logo.png"

on folder src/assets/

4

Hey, I’ve managed to solve this problem in the past, unfortunately, using solution like @alcomp provided doesn’t solve it.

If your image are static and don’t want to mess up with webpack stuffs, then you could do this:

<template>
     <ion-img :src="image" />
</template>


<script lang="ts">
import { IonImg } from '@ionic/vue'
import { defineComponent, computed } from 'vue'

export default defineComponent({
  components: { IonImg },
  setup() {
    const image = computed(() => require('../../assets/image.png'))

    return {
      image,
    }
  }
})
</script>
2 Likes