An image, an image! My Kingdom for a header image!
King Richard III, probably
Uses the wonderful npm package open-graph-scraper to fetch some image from a given URL.
I have a demo server running at https://image.letterq.org/URL_TO_FETCH_IMAGE_FROM
URL_TO_FETCH_IMAGES_FROM
must be url encoded.
For example, the header image to this repo can be fetched like this: https://image.letterq.org/https%3A%2F%2Fgithub.com%2Fqcasey%2Ffetch-image-proxy
Docker Image is built automatically to run your own server.
The package prefers open graph images, but will fall back to the first inline <img>
otherwise.
This API 302 redirects requests to the found image, so you can include it (with an errorBuilder) in components like:
final String url = "https://ogp.me/";
Image.network("https://image.letterq.org/${Uri.encodeComponent(url)}",
loadingBuilder:
(context, child, loadingProgress) {
if (loadingProgress == null) return child;
return CircularProgressIndicator();
},
errorBuilder: (context, error, stackTrace) =>
Text("Could not load image"),
)),
Responses are in the ~1-3 second range, depending on a number of factors. You can put an image cache like Cloudflare in front of this API to drastically improve response times after the first fetch.
- https://thebolditalic.com/this-colorized-1940s-clip-of-downtown-san-francisco-is-jaw-dropping-adc8d163b536
- https://github.com/qcasey/fetch-image-proxy
- https://notes.eatonphil.com/bootloader-basics.html
- https://msrc-blog.microsoft.com/2022/01/20/an_armful_of_cheris/
405
when you didn't URL encode404
when there aren't any images to fetch from the URL302
redirect to the found image