如何在Laravel航班预订应用中借助Amadeus API动态获取航司Logo？

后端处理：给航班数组添加Logo地址 #

你可以通过两种常用方式获取航司Logo地址，将其加入flightList数组中：

方式1：使用公共CDN拼接Logo地址

很多公共服务支持通过航司IATA代码直接获取Logo，无需本地存储。只需拼接固定格式的URL即可：

foreach ($response['data'] as $flightOffer) {
    $airlineCode = $flightOffer['carrierCode'];
    // 按需求调整尺寸（示例为300x300，可改为100x100等）
    $airlineLogo = "https://pics.avs.io/300/300/{$airlineCode}.png";

    $flightList[] = [
        'airline' => $airlineCode,
        'airline_logo' => $airlineLogo,
        // 保留其他原有字段...
    ];
}

说明：主流航司的IATA代码基本都能匹配到有效Logo，若遇到小众航司无图，可结合前端兜底方案处理。

方式2：本地存储Logo文件（更可控）

1. 提前下载航司Logo，按航司IATA代码命名（如AA.png对应美国航空），放入Laravel项目的public/images/airlines/目录
2. 后端生成本地访问URL，同时处理缺失Logo的兜底逻辑：

foreach ($response['data'] as $flightOffer) {
    $airlineCode = $flightOffer['carrierCode'];
    $logoFileName = "{$airlineCode}.png";
    $logoLocalPath = "images/airlines/{$logoFileName}";
    
    // 检查文件是否存在，不存在则使用默认图
    $airlineLogo = file_exists(public_path($logoLocalPath)) 
        ? asset($logoLocalPath) 
        : asset('images/airlines/default.png');

    $flightList[] = [
        'airline' => $airlineCode,
        'airline_logo' => $airlineLogo,
        // 保留其他原有字段...
    ];
}

说明：需提前准备default.png作为兜底图，避免前端出现裂图。

前端渲染：展示航司Logo #

根据你使用的前端技术，选择对应渲染方式：

1. Laravel Blade模板渲染

@foreach($flightList as $flight)
    <div class="flight-card">
        <!-- 添加图片加载失败兜底 -->
        <img 
            src="{{ $flight['airline_logo'] }}" 
            alt="{{ $flight['airline'] }} 航司Logo" 
            onerror="this.src='{{ asset('images/airlines/default.png') }}'"
            class="airline-logo"
        >
        <span class="airline-code">{{ $flight['airline'] }}</span>
        <!-- 其他航班信息 -->
    </div>
@endforeach

2. Vue/React等前端框架（API返回JSON场景）

以Vue为例：

<template>
  <div v-for="flight in flightList" :key="flight.id" class="flight-card">
    <img 
      :src="flight.airline_logo" 
      :alt="`${flight.airline} 航司Logo`"
      @error="handleLogoError"
      class="airline-logo"
    >
    <span class="airline-code">{{ flight.airline }}</span>
  </div>
</template>

<script setup>
const handleLogoError = (e) => {
  e.target.src = '/images/airlines/default.png';
};
</script>

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