How to tell which images are loaded by a route?

[lilouartz]

I am using Remix with Fastify.

This is how I currently preload CSS and JavaScript.

However, I don't see where can I tap to pre-load images?

const serverBuild = (await import('../../build/server')) as ServerBuild;

const routes = createRoutes(serverBuild.routes);

const getLinks = (path: string, maxLinks: number = 10) => {
    const matches = matchServerRoutes(routes, path);

    if (!matches) {
      return [];
    }

    const links: string[] = [];

    // TODO preload images ???

    // preload CSS
    for (const match of matches) {
      const route = serverBuild.assets.routes?.[match.route.id];

      if (!route) {
        continue;
      }

      for (const css of route.css ?? []) {
        links.push(
          `<${css}>; rel=preload; as=style;`,
          `<${css}>; rel=stylesheet; as=style;`,
        );
      }
    }

    // preload JavaScript modules
    for (const match of matches) {
      const route = serverBuild.assets.routes?.[match.route.id];

      if (!route) {
        continue;
      }

      if (!route.module) {
        continue;
      }

      links.push(
        `<${route.module}>; rel=preload; as=script; crossorigin="anonymous"`,
        `<${route.module}>; rel=modulepreload; as=script; crossorigin="anonymous"`,
      );
    }

    return unique(links).slice(0, maxLinks);
  };