如何在Vue+Laravel项目中替换ApplicationLogo自定义Logo？

核心问题：路径配置错误 #

你尝试的几种引用方式失败，本质是没遵循Laravel+Vite的静态资源路径规则，下面是两种可靠的实现方案：

方案一：用public目录存放图片（简单直接） #

1. 在项目根目录的public文件夹下，创建images子文件夹，把你的logo.png或logo.svg放进去。
2. 修改ApplicationLogo.vue：

<template>
  <div>
    <!-- PNG示例 -->
    <img src="/images/logo.png" alt="自定义Logo" />
    <!-- SVG示例 -->
    <!-- <img src="/images/logo.svg" alt="自定义Logo" /> -->
  </div>
</template>

• 原理：Laravel默认把public目录作为网站根路径，所以/images/xxx会直接指向public/images/xxx。

方案二：用resources/js内的资源（适合打包场景） #

1. 在resources/js下创建assets/images文件夹，放入你的图片。
2. 修改ApplicationLogo.vue，通过导入方式引用：

<template>
  <div>
    <img :src="logoImage" alt="自定义Logo" />
  </div>
</template>

<script setup>
// 路径根据实际存放位置调整，@是Laravel Vite默认配置的resources/js别名
import logoImage from '@/assets/images/logo.svg'
// 如果是PNG就改成logo.png
// import logoImage from '@/assets/images/logo.png'
</script>

• 原理：Vite会把这类资源打包到public/build目录，自动处理路径问题。

避坑指南 #

• 不要写/public/build/logo/logo.png这种路径，网站根目录已经是public，这么写会变成public/public/build/xxx，肯定找不到。
• 直接在img的src里写@/olim-logo.svg无效，因为@是模块别名，必须通过import导入后绑定到:src。
• 如果是SVG，直接把代码粘贴到template里最省心，和原来的Laravel Logo写法一致，完全不用处理路径：

<template>
  <svg viewBox="0 0 你的SVG尺寸" xmlns="http://www.w3.org/2000/svg">
    <!-- 粘贴你的SVG path或其他元素代码 -->
  </svg>
</template>

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