ionic vue 无法从资产文件夹中选择图像？

Posted 2023-02-22

【中文标题】ionic vue 无法从资产文件夹中选择图像？

【英文标题】：ionic vue is unable to pick image from assets folder?

【发布时间】：2021-09-13 03:28:01

【问题描述】：

在我的 ionic vue 项目中，我在多个地方使用图像显示。它无处不在，但我知道我在资产文件夹中又添加了一张图片，但 ionic 完全无法加载该图片

<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>

这个组件名称是 Product.Vue

Product.vue位置

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

图片路径

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

【参考方案1】：

代替：

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

试试：

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

@/ 是您项目的 src 文件夹。

【讨论】：

收到此错误Module not found: Error: Can't resolve '@/assets/bottom_kurve.png' in 'C:\Users\bilal\Downloads\arcadeapp\arcadeapp\src\views\Shop'

将图片路径移动到src文件夹

你的意思是说我需要在src文件夹中移动图片？

您的图片位于dist 文件夹中，因此请将其放入src\assets\bottom_kurve.png