Laravel JetStream中Vue组件调用user.profile_photo_url获取头像不生效问题

排查步骤 #

• 先验证user对象是否携带profile_photo_url属性：在模板中临时加入{{ user.profile_photo_url }}输出字段值，如果返回空或者undefined，说明后端返回用户数据时漏加了该属性。JetStream的profile_photo_url是User模型的访问器，默认不会随JSON序列化返回，需要在User模型中添加protected $appends = ['profile_photo_url'];将该字段追加到序列化结果中，这也是绝大多数「其他场景正常、单一场景失效」的核心诱因。
• 验证生成的头像链接有效性：把模板渲染后输出的profile_photo_url复制到浏览器地址栏单独访问，判断是否为404/403错误：
  • 如果是404，先确认是否执行过php artisan storage:link创建公共存储软链接，同时检查.env文件中的APP_URL配置是否和当前站点访问域名一致，域名不匹配会导致生成的资源链接路径错误。
  • 如果是403，检查storage/app/public目录的文件权限是否允许Web服务器读取，同时确认Nginx/Apache的配置没有拦截storage路径的访问请求。
• 增加头像加载失败兜底逻辑，避免头像失效时页面显示异常：

<img 
  class="h-10 w-10 rounded-full" 
  :src="user.profile_photo_url" 
  :alt="user.name"
  @error="e => e.target.src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI2U1ZTdlYiI+PHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTAgMThjLTQuNDEgMC04LTMuNTktOC04czMuNTktOCA4LTggOCAzLjU5IDggOC0zLjU5IDgtOCA4em0wLTE0Yy0yLjIxIDAtNCAxLjc5LTQgNCAwIDEuOTMgMS40MiAzLjU2IDMuMzEgMy44N0M5LjUgMTIuNiA5IDEzLjczIDkgMTVoNnYtMWMwLTEuNzctLjY1LTMuMjktMS42OS00LjE4QzE2LjU4IDkuNTYgMTggNy45MyAxOCA2YzAtMi4yMS0xLjc5LTQtNC00eiIvPjwvc3ZnPg=='"
/>

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