fix: double loading image when placeholder is present

[george-moongroup]

🔗 Linked issue

resolves #1683

❓ fix

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

We resolved an issue where images could load more than once in the NuxtImg component. Previously, when a placeholder image was in use, it triggered a new image load even though the main image had already started loading. The update ensures that if a placeholder is already handled, we avoid loading the image again. This change prevents duplicate network requests and avoids unnecessary load events

[danielroe]

there are things in this block we want to apply for placeholders, I think

[george-moongroup]

at this point, if SSR nor SSR the placeholder it is already loaded, if the
if (placeholder.value ... will be kept a weird dance will happend the existing/loaded placeholder will get replaced by the mainSrc but the computed will repace it with the placeholder and then with the mainSrc once again ... so from here the double loading

[pascalvaccaro]

Following up on this, as we encountered the same issue using the placeholder prop.

@george-moongroup Daniel is right, there are some usecases where the placeholder is needed in the onMounted callback, especially in non-SSR mode (the placeholderLoaded ref would never be updated, leaving the image src as the URL of the placeholder, not the main image)

@danielroe even with a valid fix (I'm not asking to merge, the PR is for testing purposes only so I add to tweak the code to enable & run e2e testing), I'm still left wondering about the preload attribute in SSR-enabled environment when placeholder holds a "truthy" value:

• should the link tag preload the placeholder URL? => it seems counter-intuitive as the goal of the placeholder is to "wait until" the main image is loaded. However the page will load faster this way as the browser won't have to wait for the main image.
• should the link tag preload the actual URL? => it seems a bit useless to have a placeholder if the main image is preloaded. However, the page will load slower because it'll have to wait for the main image to be loaded.

Another point could be made about the loading prop when set to "lazy": should the placeholder feature still run? The browser won't load the main image until it estimates that it will be needed imminently: I feel like whenever loading="lazy", fetching both the placeholder AND the main image is a bit much, as the browser could only load the main image lazily.

Please advise 🙏 Thank you for your work! ❤️