Quasar(Vue3)通过Prop动态加载图片报错求助

问题背景 #

在Quasar + Vue3项目中，通过Prop向子组件传递值以动态加载数据库返回的图片时，出现图片加载失败问题。Prop传递本身正常（文本内容可正常渲染），但图片路径始终无法正确解析。

两种失败尝试 #

尝试1：用Prop作为索引获取图片路径 #

父组件代码：

<Card :indexVal="pickedValue" />

子组件代码：

<template>
  <div class="headlines-font">
      <div style="bottom: 0px" class="row content-around full-width q-px-lg">
        <div style="width: 30vw; color: white" class="q-pb-lg full-width">
          {{ actionData[indexVal].attributes.text }}
        </div>
        <q-img
          :src="require(`../assets/${actionData[indexVal].attributes.img}`)"
          height="60%"
          class="q-ma-none bg-green q-mx-none"
        />
      </div>
  </div>
</template>
<script setup>
import { defineProps, ref } from "vue";
import { dataStore } from "../stores/storage";
const stateData = dataStore();

const actionData = ref(stateData.getActionCardData);
const props = defineProps({ indexVal: Number });
</script>

验证：{{ indexVal }}可正常渲染，Prop传递正常，但图片加载报错。

尝试2：直接传递文本和图片路径Prop #

父组件代码：

<Card
  boxClass="actions"
  :indexVal="pickedValue"
  :txt="actionText"
  :img="actionImg"
/>

子组件代码：

<template>
  <div class="headlines-font">
      <div style="bottom: 0px" class="row content-around full-width q-px-lg">
        <div style="width: 30vw; color: white" class="q-pb-lg full-width">
          {{ txt }}
        </div>
          <q-img
            :src="require(`../assets/${img}`)"
            height="60%"
            class="q-ma-none bg-green q-mx-none"
          />
      </div>
  </div>
</template>
<script setup>
import { defineProps, ref } from "vue";
import { dataStore } from "../stores/storage";
const stateData = dataStore();

const actionData = ref(stateData.getActionCardData);
const props = defineProps({ indexVal: Number, txt: String, img: String });
</script>

验证：文本{{ txt }}可正常显示，但图片仍加载失败。

问题原因 #

Quasar基于Vite构建，Vite对静态资源采用编译时静态解析机制，require()并非Vite推荐的资源引入方式，且动态拼接的字符串路径无法被Vite的预编译机制识别，导致资源找不到。即使路径拼写正确，动态生成的require()调用也无法触发Vite的资源打包解析。

解决方案 #

方案1：预导入图片并建立映射表 #

提前将所有需要的图片导入，通过映射表根据Prop值匹配路径：

<template>
  <div class="headlines-font">
      <div style="bottom: 0px" class="row content-around full-width q-px-lg">
        <div style="width: 30vw; color: white" class="q-pb-lg full-width">
          {{ txt }}
        </div>
          <q-img
            :src="imgMap[img]"
            height="60%"
            class="q-ma-none bg-green q-mx-none"
          />
      </div>
  </div>
</template>
<script setup>
import { defineProps } from "vue";
// 预导入所有需要的图片
import img_home from '../assets/home.png'
import img_profile from '../assets/profile.png'

// 建立文件名与导入路径的映射
const imgMap = {
  'home.png': img_home,
  'profile.png': img_profile
}

const props = defineProps({ txt: String, img: String });
</script>

优点：符合Vite的资源处理规范，打包时会自动优化资源。
注意：确保数据库返回的图片文件名与映射表中的键完全一致（包括大小写）。

方案2：将图片放入public目录使用绝对路径 #

将图片移动到项目根目录的public/assets文件夹下，直接使用绝对路径访问，无需require()：

<template>
  <div class="headlines-font">
      <div style="bottom: 0px" class="row content-around full-width q-px-lg">
        <div style="width: 30vw; color: white" class="q-pb-lg full-width">
          {{ txt }}
        </div>
          <q-img
            :src="`/assets/${img}`"
            height="60%"
            class="q-ma-none bg-green q-mx-none"
          />
      </div>
  </div>
</template>
<script setup>
import { defineProps } from "vue";
const props = defineProps({ txt: String, img: String });
</script>

优点：无需预导入，适合图片数量较多或动态新增的场景。
注意：public目录下的资源不会被Vite编译处理，需保证路径结构正确（如public/assets/xxx.png对应/assets/xxx.png）。

方案3：使用后端返回的完整资源URL #

如果图片存储在后端服务器或云存储，直接让后端返回完整的图片URL，前端直接使用该URL作为src值即可：

<q-img :src="img" height="60%" class="q-ma-none bg-green q-mx-none" />

此时子组件无需处理路径拼接，直接使用Prop传递的完整URL。

内容的提问来源于stack exchange，提问作者acroscene