What's the secret sauce for getting Functions API to work with static web site?

I'm brand new, got my first Azure static web site up and running so that's good!  Now I need to create some images in code and that's fighting me tooth and nail.

The code to generate the image looks like this:

using Microsoft.Azure.Functions.Worker;
using Microsoft.Azure.Functions.Worker.Http;
using Microsoft.Extensions.Logging;
using SkiaSharp;
using System.Diagnostics;
using System.IO;
using System.Net;

namespace Api
{
    public class GenerateImage
    {
        private readonly ILogger _logger;

        public GenerateImage(ILoggerFactory loggerFactory)
        {
            Debug.WriteLine($"GenerateImage.GenerateImage()");

            _logger = loggerFactory.CreateLogger<GenerateImage>();
        }

        // http://localhost:7071/api/image/124 works
        [Function("GenerateImage")]
        public HttpResponseData Run(
            [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = "image/{id}")] HttpRequestData req,
            string id)
        {
            int width = 200, height = 100;

            Debug.WriteLine($"GenerateImage.Run() [id={id}]");

            using var bitmap = new SKBitmap(width, height);
            using var canvas = new SKCanvas(bitmap);
            canvas.Clear(SKColors.LightBlue);

            var paint = new SKPaint
            {
                Color = SKColors.Black,
                TextSize = 24,
                IsAntialias = true
            };

            canvas.DrawText($"ID: {id}", 10, 50, paint);

            using var ms = new MemoryStream();
            bitmap.Encode(ms, SKEncodedImageFormat.Png, 100);
            ms.Position = 0;

            var response = req.CreateResponse(HttpStatusCode.OK);
            response.Headers.Add("Content-Type", "image/png");
            response.Headers.Add("Cache-Control", "public, max-age=86400"); // 1 day
            // response.Body = ms;
            ms.CopyTo(response.Body);

            return response;
        }
    }
}

and if I navigate to http://localhost:7071/api/image/124 (for example) it happily generates an image with the number 124 in it.

But if I add the HTML tag

<img src="/api/image/123" alt="Generated Image">

to one of my other web pages, it says there's no such page.  Apparently this is because my web pages are coming from my web site and it's at https://localhost:7154 and it doesn't know how to contact the Functions API.

My staticwebapp.config.json looks like this:

{
  "routes": [
    {
      "route": "/api/*",
      "allowedRoles": [ "anonymous" ]
    }
  ],
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": [ "/api/*" ]
  }
}

What am I missing?