轮播图数据应从 Banner 模型查，需建 banner 表含 id、title、image、url、sort、status 字段，控制器中用 model('Banner')->where('status', 1)->order('sort ASC')->select() 获取启用且排序正确的数据。
轮播图数据该从哪个模型查
ThinkPHP5.1 中轮播图一般属于「系统配置类」或「内容管理类」数据，不建议硬编码写死在模板里。常见做法是单独建一张 banner 表（字段至少含 id、title、image、url、sort、status），对应一个 BannerModel 模型。
前端首页调用时，控制器里必须先查出有效且已启用的数据：
// app/index/controller/Index.php
public function index()
{
$banners = model('Banner')->where('status', 1)->order('sort ASC')->select();
$this->assign('banners', $banners);
return $this->fetch();
}
注意：status 字段必须存在且用于开关控制，否则上线后无法临时下线某张图；sort 排序不能依赖主键 ID，否则新增图会跑到最后。
模板里怎么安全输出图片路径
TP5.1 默认开启模板变量自动转义，直接输出 $banner['image'] 可能被 HTML 编码，导致 <img src="/uploads/1.jpg" alt="ThinkPHP5.1前端首页如何调用轮播图数据" > 这种失效路径。必须用 或显式拼接 __ROOT__。
立即学习“PHP免费学习笔记（深入）”；
更稳妥的做法是统一走 think\Image 或封装路径处理逻辑，但简单项目可这样写：
<{volist name="banners" id="banner"}>
<div class="item <{$i eq 1 ? 'active' : ''}>">
<img src="<{:__ROOT__} alt="ThinkPHP5.1前端首页如何调用轮播图数据" >/<{$banner.image|raw}>" alt="<{$banner.title}>">
</div>
<{/volist}>
关键点：
-
__ROOT__是 TP5.1 内置常量，指向项目根目录（非域名），配合相对路径使用 -
|raw必须加，否则上传路径中的斜杠会被转义 -
image字段存的是相对路径（如uploads/banner/20240501.jpg），不要存完整 URL
为什么轮播图加载后图片 404
最常见原因是路径拼接错误或上传目录权限问题。检查三处：
- 数据库里
image值是否以uploads/开头？如果存成/uploads/...（开头多斜杠），__ROOT__/uploads/...就会变成http://domain.com//uploads/...，触发 404 - 确认
public/uploads/目录存在且 Web 服务器（Nginx/Apache）有读取权限 - 如果用了 CDN 或静态资源分离，
__ROOT__不再适用，需改用配置项如config('app.upload_url')并在config/app.php中定义
临时调试可在模板里加一行：<div style="display:none"></div>，右键查看源码确认实际渲染出的 src 值。
要不要在控制器里做图片尺寸裁剪
轮播图尺寸固定（比如 1920×600），但运营上传的图千奇百怪。TP5.1 自带 think\Image 类可压缩裁剪，但不建议在首页控制器里实时处理——每次请求都打开图片、缩放、生成新文件，I/O 开销大，还可能因 GD 扩展缺失报错。
更合理的方式是：
- 上传时用后台接口完成裁剪并保存缩略图（例如存为
uploads/banner/20240501_1920x600.jpg） - 数据库中
image字段只存裁剪后的路径 - 前端直接引用，零额外开销
如果必须动态裁剪，至少加缓存：用 Cache::remember() 包裹 Image 处理逻辑，避免重复生成。
轮播图看着简单，但路径、状态、尺寸三个点一漏，前端就白屏或错位。尤其注意 |raw 和 __ROOT__ 的组合用法，这是 TP5.1 模板层最容易掉坑的地方。
