Laravel+Vue.js+Inertia图片渲染异常：A页显示B页不显示

开发者阿泽

2026-7-26

问题分析与解决方案

核心问题

页面B能正常渲染game.title但无法显示图片，且两个页面输出的图片路径表面一致，大概率是相对路径的上下文差异导致的请求路径错误。

解决方案

1. 统一图片路径为绝对URL（最可能解决问题）

页面A是列表页（比如/games），页面B是详情页（比如/games/1）。如果game.image存储的是相对路径（如images/game-cover.jpg），页面B会以当前URL为基准发起请求，变成/games/images/game-cover.jpg，而正确路径应该是/images/game-cover.jpg。

在Game模型中添加访问器，自动将相对路径转为绝对URL：

// app/Models/Game.php
public function getImageAttribute($value)
{
    // asset()方法会拼接当前站点的根URL
    return asset($value);
}

这样无论在哪个页面，game.image都会返回完整的绝对路径（如http://your-domain.com/images/game-cover.jpg），避免相对路径的上下文问题。

2. 优化控制器查询（顺带提升性能）

控制器B中重复查询了两次Game模型，改成关联预加载更高效：

public function index($id)
{
    $game = Game::with('usergameComments')->findOrFail($id);
    return Inertia::render('ShowGame', ['game' => $game]);
}

用findOrFail()还能在ID不存在时返回404，更规范。