Vue3组合式API：如何通过Prop动态导入图片？

我尝试仅通过父组件向子组件传递图片名称Prop来动态导入图片，但遇到了404错误，不过静态导入图片时可以正常工作。

父组件代码 #

<Message
   v-if="cartItems.length == 0"
   text="Još nemate proizvoda u košarici."
   imageName="empty-cart"
/>

子组件错误实现代码 #

<template>
  <div class="message-wrapper">
    <img
      :src="`../assets/${props.imageName}.png`"
      :alt="`${props.imageName}-img`"
    />
    <p>{{ props.text }}</p>
  </div>
</template>

<script setup>
const props = defineProps({
  text: String,
  imageName: String,
});
</script>

出现的错误 #

GET http://localhost:5173/assets/empty-cart.png 404 (Not Found)

静态导入可正常工作的子组件代码 #

<template>
  <div class="message-wrapper">
    <img
      src="../assets/empty-cart.png"
      alt="img"
    />
    <p>{{ props.text }}</p>
  </div>
</template>

问题原因 #

在Vue（尤其是Vite构建环境）中，直接用模板字符串拼接图片路径时，构建工具无法在编译阶段识别并处理这些动态资源，导致运行时路径解析错误。而静态导入时，Vite会自动处理资源路径，将其转换为构建后的正确URL。

解决方法 #

方法1：使用new URL()动态生成资源路径

通过new URL()结合import.meta.url来动态构建图片路径，让Vite能正确解析资源：

<template>
  <div class="message-wrapper">
    <img
      :src="getImageUrl(props.imageName)"
      :alt="`${props.imageName}-img`"
    />
    <p>{{ props.text }}</p>
  </div>
</template>

<script setup>
const props = defineProps({
  text: String,
  imageName: String,
});

const getImageUrl = (name) => {
  return new URL(`../assets/${name}.png`, import.meta.url).href;
};
</script>

方法2：预先导入所有可能的图片（适合图片数量少的场景）

如果需要动态切换的图片数量不多，可以预先导入所有图片，再通过imageName匹配对应的图片资源：

<template>
  <div class="message-wrapper">
    <img
      :src="imageMap[props.imageName]"
      :alt="`${props.imageName}-img`"
    />
    <p>{{ props.text }}</p>
  </div>
</template>

<script setup>
import emptyCart from '../assets/empty-cart.png';
// 按需导入其他需要的图片

const props = defineProps({
  text: String,
  imageName: String,
});

const imageMap = {
  'empty-cart': emptyCart,
  // 添加其他图片的键值对映射
};
</script>

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