Vite动态导入图片URL异常求助：解析路径出现undefined

问题场景 #

我有一个包含图片名称的JSON文件：

{
  "img": "placeholder.jpg",
  "title": "124 ave NW",
  "sqft": "1319",
  "bedrooms": "3",
  "bathrooms": "3"
}

组件中尝试根据img字段动态导入图片，代码如下：

<template>
  <div class="project">
    <img width="350px" height="300px" :src="getImgUrl(img)" class="project-image" />
    <h1 class="project-title">{{ title }}</h1>
    <div class="project-details">
      <div class="bedroom-container"><img :src="bedIcon" /> {{ bedrooms + ' bedroom' }}</div>
      <div class="bathroom-container"><img :src="bathIcon" /> {{ bathrooms + ' bathroom' }}</div>
      <div class="size-container">{{ sqft + ' Sq. Ft.' }}</div>
    </div>
  </div>
</template>

使用getImgUrl函数解析图片路径：

const getImgUrl = (img: string) => {
  return new URL(`./assets/images/${img}`, import.meta.url).href
}

预期该函数会拼接出src/assets/images/placeholder.jpg，但实际在开发者工具中看到图片URL为http://localhost:5173/src/components/project-display-component/undefined。已查阅Vite静态资源文档，且在vite.config.ts中配置了base: './src'，问题仍未解决。

排查与解决步骤 #

• 确认img变量的有效性：先检查组件是否正确接收了JSON中的img字段，比如是否在props中定义、数据导入是否正常。可以在组件内添加console.log(img)，如果输出undefined，说明变量未正确传递，这是导致路径出现undefined的直接原因。
• 修正base配置：base: './src'是错误配置，Vite的base用于设置部署时的公共路径，本地开发无需设置为./src，建议恢复默认配置：

  // vite.config.ts
  export default defineConfig({
    base: '/' // 或直接删除该行，使用默认值
  })
  

• 调整相对路径层级：new URL的第一个参数是相对于当前组件文件的路径。假设组件位于src/components/project-display-component/，而图片在src/assets/images/，那么相对路径需要往上两级，修改函数如下：

  const getImgUrl = (img: string) => {
    return new URL(`../../assets/images/${img}`, import.meta.url).href
  }
  

• 校验图片文件存在性：确认src/assets/images/placeholder.jpg真实存在，且文件名（包括大小写）与JSON中的完全一致，Vite对文件名大小写敏感。

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