Skip to content

Commit 258cb2c

Browse files
committed
feat(image): Pass crossOrigin prop in
- Allow setting the crossOrigin prop on the Image component - Added unit tests - Fixes #8531
1 parent ef7675f commit 258cb2c

File tree

3 files changed

+45
-2
lines changed

3 files changed

+45
-2
lines changed

packages/@react-spectrum/image/src/Image.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,8 @@ function Image(props: SpectrumImageProps, ref: DOMRef<HTMLDivElement>) {
6161
style={{objectFit}}
6262
className={classNames(styles, 'spectrum-Image-img')}
6363
onError={props?.onError}
64-
onLoad={props?.onLoad} />
64+
onLoad={props?.onLoad}
65+
crossOrigin={props?.crossOrigin} />
6566
</div>
6667
);
6768
});

packages/@react-spectrum/image/test/Image.test.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,4 +37,41 @@ describe('Image', () => {
3737

3838
expect(mockOnErrorCallback).toBeCalled();
3939
});
40+
41+
describe('crossorigin attribute', () => {
42+
test('anonymous', () => {
43+
const {container} = render(
44+
<Image
45+
src="https://i.imgur.com/Z7AzH2c.png"
46+
alt="Sky and roof"
47+
crossOrigin="anonymous" />
48+
);
49+
50+
const img = container.querySelector('img');
51+
expect(img).toHaveAttribute('crossorigin', 'anonymous');
52+
});
53+
54+
test('use-credentials', () => {
55+
const {container} = render(
56+
<Image
57+
src="https://i.imgur.com/Z7AzH2c.png"
58+
alt="Sky and roof"
59+
crossOrigin="use-credentials" />
60+
);
61+
62+
const img = container.querySelector('img');
63+
expect(img).toHaveAttribute('crossorigin', 'use-credentials');
64+
});
65+
66+
test('unset', () => {
67+
const {container} = render(
68+
<Image
69+
src="https://i.imgur.com/Z7AzH2c.png"
70+
alt="Sky and roof" />
71+
);
72+
73+
const img = container.querySelector('img');
74+
expect(img).not.toHaveAttribute('crossorigin');
75+
});
76+
});
4077
});

packages/@react-types/image/src/index.d.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,12 @@ export interface ImageProps {
3333
/**
3434
* Called when the image has successfully loaded, see [load event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/load_event).
3535
*/
36-
onLoad?: ReactEventHandler<HTMLImageElement>
36+
onLoad?: ReactEventHandler<HTMLImageElement>,
37+
/**
38+
* Indicates if the fetching of the image must be done using a CORS request.
39+
* [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin).
40+
*/
41+
crossOrigin?: 'anonymous' | 'use-credentials'
3742
}
3843

3944
export interface SpectrumImageProps extends ImageProps, DOMProps, StyleProps {

0 commit comments

Comments
 (0)