Skip to content

Commit 0b91e66

Browse files
Copilotafc163
andcommitted
fix: pass fetchPriority to img element instead of wrapper div
Add fetchPriority to ImageElementProps and COMMON_PROPS so it gets correctly forwarded to the inner img element. Also filter COMMON_PROPS from otherProps to prevent img-specific attributes from leaking to the wrapper div. Closes #270 Co-authored-by: afc163 <507615+afc163@users.noreply.github.com>
1 parent daec67f commit 0b91e66

File tree

4 files changed

+25
-1
lines changed

4 files changed

+25
-1
lines changed

src/Image.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,15 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
173173
COMMON_PROPS.map(prop => props[prop]),
174174
);
175175

176+
// Filter out img-specific props from wrapper div props
177+
const wrapperProps = useMemo(() => {
178+
const obj = { ...otherProps };
179+
COMMON_PROPS.forEach((prop: any) => {
180+
delete obj[prop];
181+
});
182+
return obj;
183+
}, [otherProps]);
184+
176185
// ========================== Register ==========================
177186
const registerData: ImageElementProps = useMemo(
178187
() => ({
@@ -207,7 +216,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
207216
return (
208217
<>
209218
<div
210-
{...otherProps}
219+
{...wrapperProps}
211220
className={clsx(prefixCls, rootClassName, classNames.root, {
212221
[`${prefixCls}-error`]: status === 'error',
213222
})}

src/common.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,5 @@ export const COMMON_PROPS: (keyof Omit<ImageElementProps, 'src'>)[] = [
1010
'srcSet',
1111
'useMap',
1212
'alt',
13+
'fetchPriority',
1314
];

src/interface.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export type ImageElementProps = Pick<
1313
| 'srcSet'
1414
| 'useMap'
1515
| 'alt'
16+
| 'fetchPriority'
1617
>;
1718

1819
export type PreviewImageElementProps = {

tests/basic.test.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,19 @@ describe('Basic', () => {
5151
expect(onClickMock).toHaveBeenCalledTimes(1);
5252
});
5353

54+
it('fetchPriority should be passed to img element', () => {
55+
const { container } = render(
56+
<Image
57+
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
58+
fetchPriority="high"
59+
/>,
60+
);
61+
const img = container.querySelector('img');
62+
const wrapper = container.querySelector('.rc-image');
63+
expect(img).toHaveAttribute('fetchpriority', 'high');
64+
expect(wrapper).not.toHaveAttribute('fetchpriority');
65+
});
66+
5467
it('className and style props should work on img element', () => {
5568
const { container } = render(
5669
<Image

0 commit comments

Comments
 (0)