search

saneef / eleventy-plugin-img2picture

Eleventy plugin to replace <img> using <picture> with resized and optimized images.
MIT License
22 stars 2 forks source link

Errors with protocol-relative URLS (e.g. <img src="//example.com/image.jpg">) #27

Open nfriedly opened 1 month ago

nfriedly commented 1 month ago

I had one old html file in my site with the following bit:

<img alt="Fork me on GitHub" src="//s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" style="position: absolute; top: 0pt; right: 0pt; border: 0pt none;">

That url is now dead, but the error that eleventy-plugin-img2picture gave me is:

[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] 1. Having trouble writing to "_site/stuff/swfstore-example/index.html" from "./src/stuff/swfstore-example/index.html" (via EleventyTemplateError)
[11ty] 2. Transform `img2picture` encountered an error when transforming ./src/stuff/swfstore-example/index.html. (via EleventyTransformError)
[11ty] 3. ENOENT: no such file or directory, stat 'src/s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png' (via Error)
[11ty] 
[11ty] Original error stack trace: Error: ENOENT: no such file or directory, stat 'src/s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png'
[11ty]     at Object.stat (node:internal/fs/sync:58:25)
[11ty]     at Object.statSync (node:fs:1669:17)
[11ty]     at Image.getInMemoryCacheKey (/config/workspace/nfriedly.com/node_modules/eleventy-plugin-img2picture/node_modules/@11ty/eleventy-img/img.js:159:32)
[11ty]     at queueImage (/config/workspace/nfriedly.com/node_modules/eleventy-plugin-img2picture/node_modules/@11ty/eleventy-img/img.js:683:15)
[11ty]     at generateImage (/config/workspace/nfriedly.com/node_modules/eleventy-plugin-img2picture/lib/img2picture.js:186:26)
[11ty]     at replaceImages (/config/workspace/nfriedly.com/node_modules/eleventy-plugin-img2picture/lib/img2picture.js:256:21)
[11ty]     at Object.<anonymous> (/config/workspace/nfriedly.com/node_modules/eleventy-plugin-img2picture/lib/img2picture.js:281:14)
[11ty]     at Object.<anonymous> (/config/workspace/nfriedly.com/node_modules/@11ty/eleventy/src/BenchmarkGroup.js:32:26)
[11ty]     at Template.runTransforms (/config/workspace/nfriedly.com/node_modules/@11ty/eleventy/src/Template.js:514:30)
[11ty]     at Template.renderPageEntry (/config/workspace/nfriedly.com/node_modules/@11ty/eleventy/src/Template.js:799:26)

That ENOENT: no such file or directory, stat 'src/s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png' is the wrong error for a remote URL - I believe it's not recognizing the // at the beginning as a protocol-relative URL and therfore trying to treat it as a local file. (I have eleventyInputDir: 'src' in my config.)

These are fairly rare these days, but they are still valid. The browser just makes it either http or https, whichever the page is.

Running new URL('//example.com/image.jpg') will throw, because it doesn't have enough context to know if it should use http or https. However, these work in a img src attribute, because the browser has that context.

saneef commented 1 month ago

The isRemoteURL() function was based on the same function from eleventy-img project. Even if I allow schema relative URLs in this plugin, it will fail down the pipeline, as I'm using eleventy-img to the processing.

I'll file an issue in the eleventy-img project, and see their response.

stale[bot] commented 2 weeks ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

nfriedly commented 2 weeks ago

I think this is still an issue