在Laravel中如何从数据库请求数据并渲染到Blade文件？

实现方案总览 #

你要的功能有两种常规实现方式，不需要必须走HTTP接口返回数据，直接把变量注入Blade模板是Laravel服务端渲染的原生能力，比额外发axios请求更省事，适合静态渲染场景；如果需要动态刷新数据再用你熟悉的axios方案即可。

方案1：直接传变量到Blade（优先推荐，无额外请求） #

实现步骤 #

• 第一步：在路由/控制器中查询数据后传递给Blade模板
  可以直接在路由文件routes/web.php中实现：

  use Illuminate\Support\Facades\DB;
  
  Route::get('/你的页面访问路径', function () {
      // 注意这里填你的实际数据表名，不是数据库名
      $images = DB::select('select * from 你的图片表名');
      // compact方法会把$images变量传到对应Blade模板
      return view('你的Blade文件名', compact('images'));
  });
  

  如果抽离到控制器，控制器方法写法如下：

  namespace App\Http\Controllers;
  
  use Illuminate\Support\Facades\DB;
  
  class ImageController extends Controller
  {
      public function index()
      {
          $images = DB::select('select * from 你的图片表名');
          return view('你的Blade文件名', ['images' => $images]);
      }
  }
  

• 第二步：在Blade中直接使用变量渲染
  纯Blade渲染写法：

  @foreach($images as $item)
      <img src="{{ $item->image_link }}" alt="资源图">
  @endforeach
  

  如果是Blade内嵌Vue3组件，可以直接把变量赋值给Vue组件props：

  <你的Vue组件名 :image-list="{{ json_encode($images) }}"></你的Vue组件名>
  

方案2：axios发请求获取数据（适合动态更新场景） #

这就是你熟悉的Vue开发逻辑，在Laravel中只要做好路由配置即可，和你之前的开发习惯完全兼容：

• 第一步：在routes/api.php中定义接口路由

  use App\Http\Controllers\ImageController;
  
  Route::get('/images', [ImageController::class, 'getImageList']);
  

• 第二步：控制器方法返回JSON响应

  public function getImageList()
  {
      $images = DB::select('select * from 你的图片表名');
      // Laravel会自动将数组转为标准JSON响应，不需要额外处理格式
      return response()->json($images);
  }
  

• 第三步：Vue3中正常调用接口即可，注意接口地址前缀是/api/，示例：

  import axios from 'axios'
  
  const getImages = async () => {
    const res = await axios.get('/api/images')
    console.log(res.data) // 就是你要的图片数据
  }
  

疑问解答 #

两种方式都是正确的实现，没有优劣之分，只看使用场景：如果页面首次加载就要渲染图片、不需要后续无刷新更新，优先用方案1，减少一次HTTP请求，性能更好；如果是用户交互后才加载图片、或者需要动态刷新内容，用方案2即可。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov