Skip to content

feat: add static generation support for nuxt picture - #674

Closed
jimhlad wants to merge 3 commits into
nuxt:mainfrom
jimhlad:fix/nuxt-picture-generate
Closed

feat: add static generation support for nuxt picture#674
jimhlad wants to merge 3 commits into
nuxt:mainfrom
jimhlad:fix/nuxt-picture-generate

Conversation

@jimhlad

@jimhlad jimhlad commented Dec 3, 2022

Copy link
Copy Markdown
Contributor

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

FilipBartos commented Dec 3, 2022 •
edited
Loading

Copy link
Copy Markdown

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

Saquith commented Jan 18, 2023

Copy link
Copy Markdown

@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
Comment thread 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(','))

@pi0 pi0 Jan 23, 2023

Copy link
Copy Markdown
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) {
)

Comment thread src/runtime/providers/ipx.ts
@mrleblanc101

mrleblanc101 commented Jan 25, 2023

Copy link
Copy Markdown

@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

pi0 commented Jan 27, 2023

Copy link
Copy Markdown
Member

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