如何使用对象的相对路径加载 q-img？

Question

我的 Vue 3 / TypeScript 应用程序正在使用 Quasar。我有一个对象保存我的图像的相对路径，我正在尝试使用它来加载 quasar q-img.

的相对路径

示例代码如下：

<template>
  <q-page class="flex flex-center">
    <q-item-section
      v-for="(plan, index) in plans"
      :key="index"
      :class="plan.class"
      class="col"
    >
      <q-img :src="plan.imageSrc" style="margin: auto; max-width: 64px" />
    </q-item-section>
  </q-page>
</template>

<script setup lang="ts">
const plans = [
  {
    imageSrc: "~/src/assets/paper-plane.png",
    monthlyPrice: "699",
    class: "starter",
  },
  {
    imageSrc: "~/src/assets/airport.png",
    monthlyPrice: "2,789",
    class: "growth",
  },
];
</script>

它应该在 plan.imageSrc 找到的相对路径中显示图像，但没有显示图像。

并且控制台也抛出这些错误：

http://localhost:8080/~/src/assets/paper-plane.png 404 (Not Found)
http://localhost:8080/~/src/assets/airport.png 404 (Not Found)

我也尝试使用 require 如下所示，但它也不起作用：

 <q-img :src="require(plan.imageSrc)" style="margin: auto; max-width: 64px" />

它抛出这样的控制台错误：

Error: Cannot find module '~/src/assets/paper-plane.png'

我做错了什么？

Answer 1

我可以使用 import.meta.url 在 <q-img> 中从 /src/assets 动态加载资产，如 https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url

中所述

const plans = [
  {
    imageSrc: new URL('../assets/paper-plane.png', import.meta.url).href,
    monthlyPrice: "699",
    class: "starter",
  },
  {
    imageSrc: new URL('../assets/airport.png', import.meta.url).href,
    monthlyPrice: "2,789",
    class: "growth",
  },
];

如何使用对象的相对路径加载 q-img？

How to load a q-img using a relative path from an object?

vue.js

quasar-framework