https://github.com/qcasey/fetch-image-proxy
Proxy to fetch any header or hero image from a URL
https://github.com/qcasey/fetch-image-proxy
image-api image-proxy
Last synced: 10 months ago
JSON representation
Proxy to fetch any header or hero image from a URL
- Host: GitHub
- URL: https://github.com/qcasey/fetch-image-proxy
- Owner: qcasey
- Created: 2022-01-24T17:16:17.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-01-28T18:19:28.000Z (about 4 years ago)
- Last Synced: 2025-06-29T11:57:12.751Z (10 months ago)
- Topics: image-api, image-proxy
- Language: JavaScript
- Homepage:
- Size: 23.4 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# fetch-image-proxy
> *An image, an image! My Kingdom for a header image!*
>
> King Richard III, probably
Uses the wonderful npm package [open-graph-scraper](https://www.npmjs.com/package/open-graph-scraper) to fetch *some* image from a given URL.
## Usage
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](https://hub.docker.com/repository/docker/qcasey1/fetch-image-proxy) is built automatically to run your own server.
## Implementation
The package prefers [open graph images](https://ogp.me/), but will fall back to the first inline `![]()
` otherwise.
This API 302 redirects requests to the found image, so you can include it (with an errorBuilder) in components like:
```dart
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.
## What works well
### URLs with premade open graph images
* [https://thebolditalic.com/this-colorized-1940s-clip-of-downtown-san-francisco-is-jaw-dropping-adc8d163b536](https://image.letterq.org/https%3A%2F%2Fthebolditalic.com%2Fthis-colorized-1940s-clip-of-downtown-san-francisco-is-jaw-dropping-adc8d163b536)
* [https://github.com/qcasey/fetch-image-proxy](https://image.letterq.org/https%3A%2F%2Fgithub.com%2Fqcasey%2Ffetch-image-proxy)
### URLs with img tags in the html
* [https://notes.eatonphil.com/bootloader-basics.html](https://image.letterq.org/https%3A%2F%2Fnotes.eatonphil.com%2Fbootloader-basics.html)
* [https://msrc-blog.microsoft.com/2022/01/20/an_armful_of_cheris/](https://image.letterq.org/https%3A%2F%2Fmsrc-blog.microsoft.com%2F2022%2F01%2F20%2Fan_armful_of_cheris%2F)
## What doesn't work
### Pages that require javascript before loading any html
* https://special.usps.com/testkits
## API Responses
* `405` when you didn't URL encode
* `404` when there aren't any images to fetch from the URL
* `302` redirect to the found image