CloudFlare images CORS error when loading via javascript

on my back-end i use Dropzone for uploading the files, but also for displaying already uploaded files.

let productImageUrl = 'https://imagedelivery.net/account-tag/image-id/public'
myDropzone.displayExistingFile(productImage, productImageUrl, null, 'anonymous');

it can set the crossOrigin attribute of the html object object (4th param)

above code works when picsum url’s are used

thisDropzone.displayExistingFile(productImage, 'https://picsum.photos/200', null, 'Anonymous');

the productImageUrl works when loaded inside a html image tag or directly but not when it’s loaded via javascript, what CORS thing am i missing here?

actual error:

for each image trying to load this way

example productImageUrl

it seems te be common when using the CloudFlare Image Url’s with javascript gallery/lightbox tools. Featherlight example:

https://jsfiddle.net/L8f9wvog/1/

ok, after debugging it seems the following “works”

  • Featherlight lightbox works if i specify type: 'image' in the gallery init
  • Dropzone displayExistingFile works if i specify thumbnails=false

within these boundaries things seem to work without extra CORS stuff, i think it is something with detecting the image filetype on the cloudflare image url’s