feat(Image): preview-src prop #56
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/react-component/image/cttgyj0ab |
Codecov Report
@@ Coverage Diff @@
## master #56 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 5 5
Lines 220 221 +1
Branches 57 58 +1
=========================================
+ Hits 220 221 +1
Continue to review full report at Codecov.
|
src/Image.tsx
Outdated
| @@ -52,6 +53,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = ({ | |||
| height, | |||
| style, | |||
| preview = true, | |||
| previewSrc, | |||
There was a problem hiding this comment.
This prop better put into preview: { src }
src/Preview.tsx
Outdated
|
|
||
| const { useState, useEffect } = React; | ||
|
|
||
| interface PreviewProps extends Omit<IDialogPropTypes, 'onClose'> { | ||
| onClose?: (e: React.SyntheticEvent<Element>) => void; | ||
| src?: string; | ||
| alt?: string; | ||
| /** thumbnail src value */ | ||
| thumbnail?: string; |
There was a problem hiding this comment.
If Preview use thumbnail too weird
Kapture.2020-12-31.at.10.42.54.mp4
There was a problem hiding this comment.
😅 Maybe my thumbnails are a bit extreme.
Currently, the replacement is done when the image is loaded to achieve fast switching.
And thumbnail will appear on the first load and before the load is completed. After that it won't even appear.
There was a problem hiding this comment.
Yep, but is not universal, load status maybe Image <Spin /> or some text, like placeholder prop
There was a problem hiding this comment.
🤔 expose the loading state? let me try
There was a problem hiding this comment.
I mean this pr resolve Image src not same as preview src, ant other issues like Preview placeholder(if loading) we maybe create new or and Image placeholder is enough
There was a problem hiding this comment.
understand 👌
Not a good way. This PR will not process thumbnails / load state.
Hope to export preview-src.
eg: aliyun oss
<Image
src="https://xxx.xx/xxx.png?x-oss-process=image/auto-orient,1/resize,p_10/quality,q_10"
preview={{
src: 'https://xxx.xx/xxx.png',
}}
/>;Thanks 🙆♂️
|
Thanks |
|
and help create pr in |
Add
preview-srcto determine the original data.Fixes #55
Fixes ant-design/ant-design#28321