I am using <img> tag in my website, it works well but for all images that has a source from Instagram, some of them are not showing up. Take a look at the 'network' section in firefox's dev console, I realized those images are not downloaded properly (following one only has 468B) transferred while the real image size is actually around 200KB.
If I copy the url link and paste it directly in the browser, I can see the image get loaded. Any insight how could that happen?
A sample response header for the image requested by the <img> tag
HTTP/2 200 OK
last-modified: Wed, 02 Sep 2020 11:24:35 GMT
content-type: image/jpeg
x-haystack-needlechecksum: 3892793944
x-needle-checksum: 2679108908
x-fb-config-version-olb-prod: 1089
timing-allow-origin: *
cache-control: max-age=1209600, no-transform
content-length: 111402
x-fb-trip-id: 2096174809
date: Sun, 02 May 2021 01:52:29 GMT
cross-origin-resource-policy: same-origin
alt-svc: h3-29=":443"; ma=3600,h3-27=":443"; ma=3600
X-Firefox-Spdy: h2
And the response header if I access that image url directly in browser:
HTTP/2 304 Not Modified
last-modified: Wed, 02 Sep 2020 11:24:35 GMT
content-type: image/jpeg
x-haystack-needlechecksum: 3892793944
x-needle-checksum: 2679108908
x-fb-config-version-olb-prod: 1089
timing-allow-origin: *
cache-control: max-age=1209600, no-transform
x-fb-trip-id: 2096174809
date: Sun, 02 May 2021 01:53:32 GMT
cross-origin-resource-policy: same-origin
alt-svc: h3-29=":443"; ma=3600,h3-27=":443"; ma=3600
X-Firefox-Spdy: h2
