Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: apply sizes/srcset when using placeholder #676

Merged
merged 15 commits into from
Jun 7, 2023

Conversation

Kolobok12309
Copy link
Contributor

Fix placeholder working with sizes(srcset)

Bug: After mounting, component load only mainSrc img, ignoring srcset. For mobiles it load full-size image instead of small version, but after loading, same load small version, total it load 3 images: placeholder, fullsize, smallsize

onMounted(() => {
if (placeholder.value) {
const img = new Image()
img.src = mainSrc.value
img.onload = () => {
imgEl.value.src = mainSrc.value
placeholderLoaded.value = true
}
}
})

#189 (comment)

I don't understand what this piece is for. Mb update before nextTick?

imgEl.value.src = mainSrc.value

@alexbidenko alexbidenko mentioned this pull request Apr 4, 2023
@netlify
Copy link

netlify bot commented Apr 6, 2023

Deploy Preview for nuxt-image ready!

Name Link
🔨 Latest commit fff53fa
🔍 Latest deploy log https://app.netlify.com/sites/nuxt-image/deploys/6480e9273bfdb10008d06784
😎 Deploy Preview https://deploy-preview-676--nuxt-image.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@danielroe danielroe added the bug Something isn't working label May 28, 2023
@danielroe
Copy link
Member

Would you be able to add a regression test for this? 🙏

@Kolobok12309
Copy link
Contributor Author

Would you be able to add a regression test for this? 🙏

Added simple tests for placeholder with src and with sizes

@danielroe danielroe changed the title Fix placeholder with sizes prop fix: apply sizes/srcset when using placeholder Jun 7, 2023
@danielroe danielroe merged commit e1cc7bb into nuxt:main Jun 7, 2023
@danielroe danielroe mentioned this pull request Jun 20, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants