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.

Sign up for GitHub

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

Jump to bottom

feat: add static generation support for nuxt picture #674

Closed
wants to merge 3 commits into from
Closed

feat: add static generation support for nuxt picture #674

wants to merge 3 commits into from

Conversation

jimhlad
Copy link
Contributor

@jimhlad jimhlad commented Dec 3, 2022

Not sure if this is the right approach, but copied similar generation logic from the nuxt-img component.

It seemed to work first try, so opening a PR in case it is useful.

@jimhlad jimhlad mentioned this pull request Dec 3, 2022
Closed
@FilipBartos
Copy link

FilipBartos commented Dec 3, 2022 •
edited
Loading

Changes in this PR fixed image generation in my project. Project is using simple:

<nuxt-picture
  :src="..."
  :imgAttrs="{ class: '...' }"
/>

👍

@jimhlad jimhlad changed the title Fix/nuxt picture generate Add static generation Dec 3, 2022
@jimhlad jimhlad changed the title Add static generation Add static generation support for nuxt picture Dec 3, 2022
@romanslonov romanslonov mentioned this pull request Jan 15, 2023
Closed
@Saquith
Copy link

Saquith commented Jan 18, 2023

@danielroe Our full static nuxt3 site relies on this PR for release - it affects mobile Lighthouse performance. Is there an estimated release time? Can we assist?

@pi0 pi0 changed the title Add static generation support for nuxt picture feat: add static generation support for nuxt picture Jan 23, 2023
pi0
pi0 reviewed Jan 23, 2023
View reviewed changes
src/runtime/components/nuxt-picture.ts
nSources.value[srcKey].src,
...(nSources.value[srcKey].srcset || '').split(',').map(s => s.trim().split(' ')[0])
].filter(s => s && s.includes('/_ipx/'))
appendHeader(useRequestEvent(), 'X-Nitro-Prerender', sources.join(','))
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Refactor: We shall create a utility (prerenderImages(sources: string[]) to reuse logic with img/picture components (

image/src/runtime/components/nuxt-img.ts

Line 89 in 200842a

if (process.server && process.env.prerender) {
)

src/runtime/providers/ipx.ts Show resolved Hide resolved
@mrleblanc101
Copy link

@Saquith

How did you use this in your project ? I changed my package.json to install from git like so "@nuxt/image-edge": "jimhlad/image#fix/nuxt-picture-generate", but I get an error because the built file are not commited and I'm not sure how to build during my own deploy.

@pi0 pi0 mentioned this pull request Jan 27, 2023
Merged
@pi0 pi0 closed this in #725 Jan 27, 2023
@pi0
Copy link
Member

pi0 commented Jan 27, 2023

Thanks for PR! Landed via #725

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@pi0 pi0 pi0 left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@jimhlad @FilipBartos @Saquith @mrleblanc101 @pi0