ionic vue is unable to pick image from assets folder?

Issue

in my ionic vue project, I am using image displays in multiple places. It is working everywhere but know I added one more image in the asset folder but ionic is totally unable to load that image

<template>
  <IonPage>

    <ion-content :fullscreen="true" id="start">

      <div id="background">

        <Topbar />

        ARCTICS PRO PRODUCT PAGE

  <div> <img src="/assets/bottom_kurve.png" ></div>
      </div>

    </ion-content>

  </IonPage>
</template>

<script lang="ts">
import { IonContent, IonPage  } from '@ionic/vue';
import Topbar from '../Resources/Topbar.vue';
import { useRouter } from 'vue-router';

export default  {
  name: 'Index',
  components: {IonContent, IonPage, Topbar },
  setup() {

    return {
      router: useRouter(),
    }
  }
}
</script>

this component name is Product.Vue

Product.vue location

C:\Users\bilal\Downloads\arcadeapp\arcadeapp\src\views\Shop\Product.vue

Image path

C:\Users\bilal\Downloads\arcadeapp\arcadeapp\dist\assets\bottom_kurve.png

Solution

Instead of:

<img src="/assets/bottom_kurve.png" ></div>

Try:

<img :src="require('@/assets/bottom_kurve.png')" ></div>

The @/ is a src folder of your project.

Answered By - Maverick Fabroa