AeroModel

AeroModel

Documentation

Integration guide

Embedding API images in a website, a mobile app, or an email. With platform-specific recommendations.

1. Web (HTML / SPA)

Vanilla HTML

<img
  src="https://api.aeromodel.dash-systems.fr/v1/images/plane?plane=A320&airline=AF&resolution=card&align=bottom"
  alt="Airbus A320 Air France"
  width="640"
  height="640"
  loading="lazy"
/>

React / Next.js (with <Image> component)

import Image from "next/image";

const url = (plane: string, airline?: string) =>
  `https://api.aeromodel.dash-systems.fr/v1/images/plane?plane=${plane}` +
  (airline ? `&airline=${airline}` : "") +
  "&resolution=hd&align=bottom&filetype=webp";

export function PlaneCard({ plane, airline }: { plane: string; airline?: string }) {
  return (
    <Image
      src={url(plane, airline)}
      alt={`${plane} ${airline ?? ""}`.trim()}
      width={1280}
      height={1280}
      sizes="(max-width: 768px) 100vw, 600px"
      placeholder="empty"
    />
  );
}

Tip: add api.aeromodel.dash-systems.fr to next.config.js > images.remotePatterns.

Vue / Nuxt

<template>
  <img
    :src="url"
    :alt="`${plane} ${airline}`"
    width="640"
    height="640"
    loading="lazy"
  />
</template>

<script setup lang="ts">
const props = defineProps<{ plane: string; airline?: string }>();
const url = computed(() =>
  `https://api.aeromodel.dash-systems.fr/v1/images/plane?plane=${props.plane}` +
  (props.airline ? `&airline=${props.airline}` : "") +
  "&resolution=card&align=bottom"
);
</script>

Web recommendations

  • Always specify width and height (avoids CLS).
  • Prefer align=bottom for cards aligned in a grid.
  • Choose resolution=card (1024) for desktop, resolution=thumb (512) for lists.
  • Use filetype=webp when the browser supports it (>97% in 2026).

2. Mobile app

Security first

Never embed the API key in the mobile binary. Use a backend or an edge function that injects the key.

[Mobile app] → [Your backend] → [api.aeromodel.dash-systems.fr]
                  (injects x-api-key)

See security/key-safety.md for recommended patterns.

iOS — SwiftUI

struct PlaneImage: View {
    let plane: String
    let airline: String?

    var url: URL {
        var components = URLComponents(string: "https://your-proxy.com/v1/images/plane")!
        var items = [URLQueryItem(name: "plane", value: plane), URLQueryItem(name: "resolution", value: "card"), URLQueryItem(name: "align", value: "bottom")]
        if let a = airline { items.append(URLQueryItem(name: "airline", value: a)) }
        components.queryItems = items
        return components.url!
    }

    var body: some View {
        AsyncImage(url: url) { image in
            image.resizable().scaledToFit()
        } placeholder: {
            ProgressView()
        }
    }
}

Android — Jetpack Compose + Coil

@Composable
fun PlaneImage(plane: String, airline: String? = null) {
    val url = buildString {
        append("https://your-proxy.com/v1/images/plane?plane=")
        append(plane)
        airline?.let { append("&airline=$it") }
        append("&resolution=card&align=bottom&filetype=webp")
    }
    AsyncImage(
        model = url,
        contentDescription = "$plane ${airline ?: ""}",
        modifier = Modifier.fillMaxWidth().aspectRatio(1f)
    )
}

React Native

import { Image } from "react-native";

<Image
  source={{ uri: `https://your-proxy.com/v1/images/plane?plane=${plane}&airline=${airline}&resolution=card&align=bottom` }}
  style={{ width: "100%", aspectRatio: 1 }}
  resizeMode="contain"
/>

3. Email

Mail clients (Gmail, Outlook) cache images via their own proxies and don't gracefully support dynamic query strings without care.

Best practices

  • PNG or JPG only (no WebP — Outlook doesn't support it).
  • resolution=card or width=600 (standard email width).
  • align=bottom for consistent compositions in signatures.
  • Add HTML width= and height= attributes.
  • Serve behind your own URL if you want to track (otherwise Gmail proxies).

Sample HTML email

<table role="presentation" width="600" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" style="padding:24px;background:#001a33;">
      <img
        src="https://api.aeromodel.dash-systems.fr/v1/images/plane?plane=A380&airline=EK&width=600&filetype=jpg&align=bottom&background=%23001a33"
        alt="Airbus A380 Emirates"
        width="600"
        height="600"
        style="display:block;border:0;outline:none;"
      />
    </td>
  </tr>
</table>

Note: we use background=%23001a33 matching the <td> background to avoid a visible border.

4. Slide deck / PDF / print

  • Use resolution=ultra (4096) for printing.
  • Choose filetype=png (lossless) or filetype=jpg with a solid background.
  • align=bottom helps compose multiple aircraft on a slide on the same baseline.

5. Dashboards / BI

/v1/images/plane?plane={{ aircraft_iata }}&airline={{ carrier_iata }}&resolution=thumb&align=bottom

With auth handled by the BI tool's backend (Metabase / Superset / Power BI). Prefer resolution=thumb to save bandwidth.

See also