feat(module:image): add nz-image component #6572
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Codecov Report
@@ Coverage Diff @@
## master #6572 +/- ##
==========================================
- Coverage 89.88% 89.83% -0.05%
==========================================
Files 481 483 +2
Lines 15374 15438 +64
Branches 2343 2349 +6
==========================================
+ Hits 13819 13869 +50
- Misses 937 948 +11
- Partials 618 621 +3
Continue to review full report at Codecov.
|
stygian-desolator
force-pushed
the
feat/image-component
branch
from
84b5503
to
91bcada
Compare
|
@hsuanxyz pls help me review this, thx~ |
hsuanxyz
reviewed
Apr 7, 2021
|
|
||
| ## zh-CN | ||
|
|
||
| 添加 `nzPreload` 可以在服务端渲染下预先加载该图片。 |
There was a problem hiding this comment.
Suggested change
| 添加 `nzPreload` 可以在服务端渲染下预先加载该图片。 | |
| 添加 `nzPreload` 可以在服务端渲染下添加 [preload](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content) |
|
|
||
| ## en-US | ||
|
|
||
| Adding `nzPreload` will preload the image under server-side rendering. |
There was a problem hiding this comment.
Suggested change
| Adding `nzPreload` will preload the image under server-side rendering. | |
| Using `nzPreload` will add (preload)[https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content] under server-side rendering. |
| |nzHeight | Height | `number\|string` | `auto` | | | ||
| |nzLoader | Loader | `NzImageLoader` | `defaultLoader` | ✅ | | ||
| |nzOptimize | Whether to optimize image loading | `boolean` | `false` | ✅ | | ||
| |nzPreload | Whether to preload image | `boolean` | `false` | ✅ | |
There was a problem hiding this comment.
Suggested change
| |nzPreload | Whether to preload image | `boolean` | `false` | ✅ | | |
| |nzPreload | Whether to add [preload](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content) (only SSR) | `boolean` | `false` | ✅ | |
| |nzHeight | 高度 | `number\|string` | `auto` | | | ||
| |nzLoader | 图片加载器 | `NzImageLoader` | `defaultLoader` | ✅ | | ||
| |nzOptimize | 是否优化图片加载 | `boolean` | `false` | ✅ | | ||
| |nzPreload | 是否预加载图片 | `boolean` | `false` | ✅ | |
There was a problem hiding this comment.
Suggested change
| |nzPreload | 是否预加载图片 | `boolean` | `false` | ✅ | | |
| |nzPreload | 是否添加 [preload](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content) | `boolean` | `false` | ✅ | |
| @Input() @WithConfig() nzOptimizeSizes: number[] = [16, 32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840]; | ||
|
|
||
| get width(): number { | ||
| return typeof this.nzWidth === 'number' ? this.nzWidth : parseInt(this.nzWidth, 10); |
There was a problem hiding this comment.
The nzWidth default value is auto will be return NaN (parseInt('auto', 10)).
Comment on lines
+109
to
+110
| const headNode = this.document.getElementsByTagName('head')[0] as HTMLHeadElement; | ||
| this.render.appendChild(headNode, linkNode); |
There was a problem hiding this comment.
Suggested change
| const headNode = this.document.getElementsByTagName('head')[0] as HTMLHeadElement; | |
| this.render.appendChild(headNode, linkNode); | |
| this.renderer.appendChild(this.document.head, linkNode); | |
| .getConfigChangeEventForComponent(NZ_CONFIG_MODULE_NAME) | ||
| .pipe(takeUntil(this.destroy$)) | ||
| .subscribe(() => { | ||
| this.cdr.markForCheck(); |
| @@ -69,3 +81,13 @@ Other attributes [<img\>](https://developer.mozilla.org/en-US/docs/Web/HTML/Elem | |||
| | prev(): void | Previous image | | |||
| | next(): void | Next image | | |||
| | close(): void | Close image preview | | |||
|
|
|||
| ### NzImageLoader | |||
There was a problem hiding this comment.
More details are needed here. And we also need the built-in loaders.
hsuanxyz
reviewed
Apr 8, 2021
| ...new Set( | ||
| // 2x scale is sufficient | ||
| // https://blog.twitter.com/engineering/en_us/topics/infrastructure/2019/capping-image-fidelity-on-ultra-high-resolution-devices.html | ||
| [width, width * 2].map(w => allSizes.find(p => p >= w) || allSizes[allSizes.length - 1]) |
There was a problem hiding this comment.
Suggested change
| [width, width * 2].map(w => allSizes.find(p => p >= w) || allSizes[allSizes.length - 1]) | |
| [width, width * 2].map(w => allSizes.find(p => p >= w) || w) |
hsuanxyz
reviewed
Apr 8, 2021
| } | ||
|
|
||
| private preload(): void { | ||
| if (isPlatformServer(this.platformId)) { |
There was a problem hiding this comment.
hsuanxyz
reviewed
Apr 8, 2021
| } | ||
|
|
||
| private genSrc(): void { | ||
| if (!this.nzOptimize) { |
There was a problem hiding this comment.
Here need to determine the svg or data
|
I submitted a new Pull Request, this will be closed. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information