javascript - ionic vue 无法从 Assets 文件夹中选取图像?

标签 javascript vue.js ionic-framework ionic4 vuejs3

在我的 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

最佳答案

而不是:

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

尝试:

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

@/ 是项目的 src 文件夹。

关于javascript - ionic vue 无法从 Assets 文件夹中选取图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68203779/

相关文章:

javascript - react : How to maintain caret position when editing contentEditable div?

javascript - 无法使用javascript更改css

javascript - 删除 v-on :click event programmatically from an element (VueJs)

android - 如何在 config.xml 中指定 cordova android 版本?

javascript - Ionic 2 构建开发失败 : Maximum call stack size exceeded

java - ionic 无法构建android

javascript - 避免表达式中使用分号的最佳方法

javascript - Angular UI 掩码空占位符

javascript - WordPress + Vue.js : Contact Forms

vue.js - Vue Cli 3 生成的项目设置 HTML 标题