dinamically generated images are ignored

[massimo-cassandro]

I've a tool that generates images dynamically server-side, and they are ignored by the linter.
The src images do not contain the extension (e.g. webp, jpeg, etc.), could this be the problem?

sample url: https://.../34262

Generated images send the appropriate headers and work fine on all browser

Is it possible to make the linter also intercept images of this type?

[ausi]

I've a tool that generates images dynamically server-side, and they are ignored by the linter.

What does that mean “they are ignored”?

Please post the HTML-Source code of one of the ignored images, your issue is probably not related to the image URLs but the HTML code instead.

[massimo-cassandro]

What does that mean “they are ignored”?

The linter returns 0 out of 0 images passed all checks. (but there are several)

This is a sample code:

<div class="imageWrapper_lRJJ3B borderBottom_sNMfJg">
  <picture
    ><source
      srcset="https://app.local:8890/viewer/34262?bb=354x&amp;f=webp 1x,
        https://app.local:8890/viewer/34262?bb=708x&amp;f=webp 2x"
      type="image/webp" />
    <img
      src="https://app.local:8890/viewer/34262?bb=370x"
      srcset="https://app.local:8890/viewer/34262?bb=370x 1x,
        https://app.local:8890/viewer/34262?bb=708x 2x"
      alt="Halloween e Foliage"
  /></picture>
</div>

Thanks for your support

[ausi]

I just tried your example HTML code and got the expected 1 out of 1 images passed all checks. response from the linter.

Are your images already there after the page finished loading in the browser?
Or are they dynamically created via JavaScript afterwards?

[massimo-cassandro]

The images were already there when I lauch the linter

I'll try to set up a test page for you to try. I'll try to send you the link later

[ausi]

The images were already there when I lauch the linter

The linter reloads the current page into an <iframe> (in order to be able to resize the viewport), so the image has to be there on page load.

I'll try to set up a test page for you to try. I'll try to send you the link later

👍

[massimo-cassandro]

Trying to set up the test page, I realized what the problem is. It's what you had hypothesized at the beginning: the images do not exist in the code but in many cases they are injected by JS: this is the case of lazy images loading created via js libraries or in React , in dev mode.

The ideal thing would be if the linter could acquire the generated html and not the hard-coded one only.

Thank you again for your help

[ausi]

The ideal thing would be if the linter could acquire the generated html and not the hard-coded one only.

It already does that, but it only waits until the pages onload event. So if your script adds images after onload they cannot be found by the linter.

[massimo-cassandro]

if I understand correctly, the script generates an iframe with the page URL and then, once loading is complete, it runs the checks, thus excluding anything loaded asynchronously.

But couldn't it be possible to directly use the html code on the page?

Would it be possible to use srcdoc or data:text/html... as src value?

I would be happy to help you (if I'm able..., I haven't seen how the script is built)

[ausi]

Would it be possible to use srcdoc or data:text/html... as src value?

That does not work, as all JavaScript events would get lost, and they are required for most pages as they often react to the window size and potentially affect the size of the images themselfs.

I would be happy to help you (if I'm able..., I haven't seen how the script is built)

You can find the code responsible for loading the iframe here:

respimagelint/src/collector/index.js

Lines 28 to 72 in 194f755

	setStyles(document.body, {overflow: 'hidden'});
	setStyles(document.documentElement, {overflow: 'hidden'});
	iframe = document.createElement('iframe');
	iframe.src = document.location.href.split('#')[0] + (document.location.search ? '&' : '?') + document.location.hash;
	setStyles(iframe, {
	position: 'absolute',
	top: 0,
	left: 0,
	opacity: 0,
	'z-index': 2147483647,
	width: '100vw',
	'max-width': 'none',
	'min-width': 0,
	height: '100vh',
	'max-height': 'none',
	'min-height': 0,
	border: 0,
	});
	let promise = new Promise((resolve, reject) => {
	function checkLoaded() {
	if (
	iframe.contentWindow.jQuery
	&& iframe.contentWindow.jQuery.active !== 0
	) {
	setTimeout(checkLoaded, 10);
	}
	else {
	resolve();
	}
	}
	iframe.addEventListener('load', () => {
	try {
	let doc = iframe.contentWindow.document;
	}
	catch(e) {
	reject(new Error('Failed loading page into iframe.'));
	return;
	}
	setTimeout(checkLoaded);
	});
	});
	document.body.appendChild(iframe);

There is extra code that waits for all jQuery ajax requests (via jQuery.active), maybe we can add something similar for React?

[massimo-cassandro]

ok, I'll get a try

Thanks

[mg-aceik]

I ran into this with React too. Maybe a generic way to tell you the page is fully loaded? I tried setting jQuery = { active: 1 }; on the html and jQuery = { active: 0 }; after that, works sometimes but is a bit flaky.