Laravel Nova 4关联搜索资源中如何显示图片？

核心解决方案 #

Nova默认会转义title()方法返回的HTML内容，只需用HtmlString类包装HTML代码，即可让Nova直接渲染而不转义。

步骤1：导入HtmlString类 #

在关联资源对应的Nova类（如app/Nova/关联模型名.php）顶部导入：

use Illuminate\Support\HtmlString;

步骤2：重写title()方法 #

修改title()方法，返回包含图片标签的HtmlString实例，同时可添加样式控制图片尺寸、间距：

public function title()
{
    // 假设图片URL存储在avatar_url字段，显示名称在name字段
    return new HtmlString(sprintf(
        '<img src="%s" alt="%s" style="width: 24px; height: 24px; border-radius: 50%; margin-right: 8px;">%s',
        e($this->avatar_url), // 用e()转义内容，防范XSS风险
        e($this->name),
        e($this->name)
    ));
}

补充说明 #

• 样式可根据需求调整，比如修改图片大小、边框样式或布局间距。
• 此方法会在所有需要显示该资源标题的场景生效，包括BelongsTo搜索弹窗、关联字段展示、资源列表等。

替代方案（仅针对单个BelongsTo字段） #

如果不想修改全局title()方法，仅在特定BelongsTo字段中显示图片，可在字段定义中使用displayUsing：

BelongsTo::make('关联名称', '关联方法名', 关联资源类::class)
    ->displayUsing(function ($resource) {
        return new HtmlString(sprintf(
            '<img src="%s" alt="%s" style="width: 24px; height: 24px; border-radius: 50%; margin-right: 8px;">%s',
            e($resource->avatar_url),
            e($resource->name),
            e($resource->name)
        ));
    });

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