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

feat: auto detect image ratio #37

Merged
merged 25 commits into from
Oct 21, 2020
Merged

feat: auto detect image ratio #37

merged 25 commits into from
Oct 21, 2020

Conversation

farnabaz
Copy link
Member

Using the feature introduced in unjs/ipx#8 we can detect image original width and height and calculate image ratio to prevent CLS and remove explicit image width.

Fix #30

@Atinux Atinux requested review from Atinux and pi0 October 16, 2020 09:51
farnabaz and others added 2 commits October 16, 2020 13:35
@codecov-io
Copy link

codecov-io commented Oct 16, 2020

Codecov Report

Merging #37 into master will decrease coverage by 24.60%.
The diff coverage is 85.71%.

Impacted file tree graph

@@             Coverage Diff             @@
##           master      #37       +/-   ##
===========================================
- Coverage   87.10%   62.50%   -24.61%     
===========================================
  Files          21        3       -18     
  Lines         442       96      -346     
  Branches      103       26       -77     
===========================================
- Hits          385       60      -325     
+ Misses         57       36       -21     
Impacted Files Coverage Δ
src/providers/local/index.ts 100.00% <ø> (ø)
src/index.ts 63.38% <85.71%> (-35.04%) ⬇️
src/utils.ts 44.44% <0.00%> (-50.00%) ⬇️
src/providers/imgix/index.ts
test/fixture/utils/CSSStub.js
src/providers/twicpics/index.ts
test/fixture/base/providers/random/index.ts
src/providers/fastly/index.ts
src/providers/cloudinary/index.ts

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e5190c1...7f09c46. Read the comment docs.

Copy link
Member

@pi0 pi0 left a comment

Choose a reason for hiding this comment

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

Nice additions! Sorry for my verbose comments 🙈

const prefix = '/'

return defu(providerOptions, {
baseURL: `http://${defaultHost}:${defaultPort}${prefix}`,
Copy link
Member

Choose a reason for hiding this comment

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

  • baseURL in browser may differ from HOST when deployed to production
  • For server-side, we may directly listen to a random port

In conclusion, it would be best if at least support two baseURL options and improve later

Copy link
Member Author

Choose a reason for hiding this comment

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

I have created internalBaseURL option for server-side usage. 4bd3543 (#37)

src/providers/fastly/runtime.ts Show resolved Hide resolved
dir: options.dir
},
{
name: 'remote',
Copy link
Member

Choose a reason for hiding this comment

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

We should somehow guard this to only enable during generate to avoid service abuse

Copy link
Member Author

@farnabaz farnabaz Oct 19, 2020

Choose a reason for hiding this comment

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

We can deny all remote urls by default, and If the user wants to use a remote url she should add domains to module whitelist.
What do you think?

src/runtime/image.ts Outdated Show resolved Hide resolved
src/runtime/image.ts Outdated Show resolved Hide resolved
src/runtime/nuxt-image-mixins.ts Outdated Show resolved Hide resolved
src/runtime/nuxt-image-mixins.ts Outdated Show resolved Hide resolved
src/runtime/nuxt-image-mixins.ts Show resolved Hide resolved
src/runtime/provider-utils.ts Show resolved Hide resolved
types/runtime.d.ts Outdated Show resolved Hide resolved
@farnabaz farnabaz merged commit 0f6e17e into master Oct 21, 2020
@farnabaz farnabaz deleted the ratio branch October 21, 2020 22:49
procrates pushed a commit to procrates/nuxt-image that referenced this pull request Feb 21, 2023
Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>
Co-authored-by: pooya parsa <pyapar@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Concerns regarding fixed layout sizing
4 participants