Image Directory through CDN

[rrolonNelson]

We are delivering our images from a CDN with images stored in a blob storage, but have encountered an issue where the src URL is being converted to a relative URL.

config.yaml
imageDir: 'https://blobcdn.nelson-atkins.org/wpmediablob/Starr'

figures.yaml
src: figs/5224_c1.png

desired outcome
https://blobcdn.nelson-atkins.org/wpmediablob/Starr/figs/5224_c1.png

actual outcome
https:/blobcdn.nelson-atkins.org/wpmediablob/Starr/figs/5224_c1.png
which resolves to {URL of current page}/https:/blobcdn.nelson-atkins.org/wpmediablob/Starr/figs/5224_c1.png

In build and preview, we have the same issue when you look at the image src URL but in preview, the images will be visible. (We are using the fix for subdirectories in a build where we had to change the file in the node_modules)

Preview:

Build:

I think the issue comes from using path.join() which will remove any '//'. Based on the code in image-tag.js it looks like there is a conditional that checks if the src from figures.yaml starts with an HTTP. To resolve the issue in the light box and inline images we opted to have all the image sources in figures.yaml to have the absolute URL however this seems to break the images on the table of content cards since in table-of-contents/item/image.js the check for if the src starts with HTTP is not there so it will join the imageDir and src regardless of if it starts with an HTTP and make it a path also.

config.yaml
imageDir: 'https://blobcdn.nelson-atkins.org/wpmediablob/Starr'

figures.yaml
src: figs/5224_c1.png

desired outcome
https://blobcdn.nelson-atkins.org/wpmediablob/Starr/figs/5224_c1.png

actual outcome on table of contents
https:/blobcdn.nelson-atkins.org/wpmediablob/Starr/https:/blobcdn.nelson-atkins.org/wpmediablob/Starr/figs/5224_c1.png
which resolves to {URL of current page}https:/blobcdn.nelson-atkins.org/wpmediablob/Starr/https:/blobcdn.nelson-atkins.org/wpmediablob/Starr/figs/5224_c1.png
Build:

Is there a correct way to use images from a blob/cdn or should we endeavor to add the HTTP check to all the places where image src are generated or add a package to join an absolute URL with a path without turning them into relative URLs?

[cbutcosk]

+1, that section of image-tag.js also causes issues if you're pointing to an internal IIIF resource like a staticInlineImage, which also won't be in the asset-images directory and so joining the path produces image 404s

[Erin-Cecele]

Thank you @rrolonNelson and @cbutcosk. Please keep track of progress on this issue, or add additional comments, through issue #863.

[mphstudios]

@rrolonNelson @cbutcosk for the way images were being deployed we had not had this use case though it is entirely valid. If you open a pull request that adds to table-of-contents/item/image.js the test for startWith('http:') we can review it as an immediate solution for your publication.