Laravel9+Vue3+TS项目Vite构建时图片加载报错如何解决

你当前的vite.config.ts是Laravel 9 + Vite + Vue3的官方标准配置，无需修改。图片加载失败的核心原因是静态资源路径写错了：
你在App.vue里写的src="logo.png"属于相对路径，Vite会默认从App.vue所在的resources/js目录下查找logo.png，但你的文件实际存放在resources/js/images目录下，路径不匹配自然返回404。

任选一种即可生效：

• 修正相对路径
  直接把img标签的src属性改成指向images目录的正确相对路径：

  <img src="./images/logo.png" alt="Logo Image" />
  

  路径开头的./代表当前App.vue所在的resources/js目录，拼接后续路径即可精准定位到图片文件。

• 显式导入图片资源
  在script块中提前导入图片文件，再通过动态绑定的方式引用，Vite会自动处理资源路径解析：
  第一步，修改template里的img标签：

  <img :src="logo" alt="Logo Image" />
  

  第二步，在script中导入图片并挂载到组件实例：

  // 其他原有import保留
  import logo from './images/logo.png'
  
  export default class App extends Vue {
    logo = logo
    // 原有其他代码（showSidebar、mounted、sidebarItems等）全部保留不变
  }
  

• 公共目录存放静态资源
  把logo.png移动到Laravel项目的public/images目录下，这类存放在public目录的资源不会被Vite编译处理，可以直接通过站点根路径引用：

  <img src="/images/logo.png" alt="Logo Image" />
  

注意：修改完成后如果是开发环境请重启npm run dev服务，生产环境重新执行npm run build，避免Vite缓存导致修改不生效。

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