如何在Vue项目中从Laravel服务器获取并展示无人机图片？

核心问题分析 #

你当前使用的是本地文件系统路径（../../../../../../sager/inventory/public/images/），浏览器无法直接访问服务器的本地文件，必须通过Laravel的Web服务URL来访问静态资源。Laravel的public目录是Web根目录，所以存储在public/images/drones/下的图片，可通过http://127.0.0.1:8000/images/drones/文件名直接访问。

快速修复方案（前端） #

修改Vue模板中的图片路径，直接使用Laravel的URL拼接文件名，同时优化渲染逻辑（避免仅显示第一个无人机，处理空数据场景）：

<template>
  <section style="background-color: #eee">
    <div class="container py-5">
      <div class="row">
        <!-- 循环渲染所有无人机 -->
        <div 
          class="col-md-12 col-lg-4 mb-4 mb-lg-0" 
          v-for="drone in drones" 
          :key="drone.id"
        >
          <div class="card text-black">
            <!-- 判断图片是否存在，避免页面报错 -->
            <img
              v-if="drone.image"
              :src="`http://127.0.0.1:8000/images/drones/${drone.image}`"
              class="card-img-top"
              :alt="drone.name || '无人机图片'"
            />
            <div v-else class="p-4 text-center">暂无图片</div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

后端优化方案（推荐） #

在Laravel的DroneModel中添加访问器，自动生成完整的图片URL，前端无需手动拼接路径，更易维护：

// app/Models/DroneModel.php
class DroneModel extends Model
{
    // ... 其他模型代码

    // 定义访问器，自动生成完整图片URL
    public function getImageUrlAttribute()
    {
        if (!$this->image) {
            return null; // 无图片时返回null
        }
        // url()函数自动生成当前站点的完整URL
        return url('/images/drones/' . $this->image);
    }
}

自动添加到API返回数据 #

在DroneModel中添加以下代码，让序列化时自动带上image_url字段：

protected $appends = ['image_url'];

之后前端可直接使用该字段，无需拼接路径：

<img
  v-if="drone.image_url"
  :src="drone.image_url"
  class="card-img-top"
  :alt="drone.name || '无人机图片'"
/>

额外注意事项 #

• 确保Laravel的public/images/drones目录有写入权限，避免上传图片时出现权限错误
• 生产环境部署时，需将http://127.0.0.1:8000替换为实际站点域名
• 若Vue与Laravel运行在不同端口，需在Laravel中配置CORS（可使用barryvdh/laravel-cors包快速实现）

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