Version: latest

Image

<Image> on lumin
โ€‹

Description

The Image component displays a 2D image from an image file.

Example

import React from 'react';
import { View, Image, Text, Scene, Prism } from 'magic-script-components';
export default class MyApp extends React.Component {
constructor(props) {
super(props);
this.state = { index: 0 };
}
onNextClick = eventData => {
this.setState(state => ({ index: state.index < 3 ? state.index + 1 : 1 }));
};
render() {
return (
<Scene>
<Prism size={[1, 1, 0.2]} >
<View name="main-view" alignment={'center-center'} localPosition={[-0.16, 0, 0]}>
<Image localPosition={[-0.13, 0, 0]} height={0.17} width={0.17} filePath={require('../../resources/contact1.jpg')} />
<Text alignment={'center-left'} textSize={0.07} weight={"bold"} textColor={"#85D834"} localPosition={[0, 0.05, 0]}>
Lorem Ipsum
</Text>
<Image alignment={'center-left'} height={0.07} width={0.07} icon={"send"} localPosition={[0, -0.03, 0]} />
<Text alignment={'center-left'} textSize={0.04} textColor={"#e0e0e0"} localPosition={[0.1, -0.03, 0]}>
lorem.lpsum@magicleap.com
</Text>
</View>
</Prism>
</Scene>
);
}
}

Common Events

Common Properties

Create Properties

Image offers 3 constructors accepting different property sets.

NameTypeDefault ValueRequiredDescription
filePathstringn/aNThe path to the file to render for the image.
widthnumber0NThe width of the image.
heightnumber0NThe height of the image.
absolutePathbooleanfalseNFlag that pngFile is an absolute path name, instead of a relative path.
useFramebooleanfalseNSpecifies whether the image should have a frame.

Lumin only

NameTypeDefault ValueRequiredDescription
resourceIdBigIntn/aNThe resource ID to render for the image.
widthnumber0NThe width of the image.
heightnumber0NThe height of the image.
useFramebooleanfalseNSpecifies whether the image should have a frame.

NameTypeDefault ValueRequiredDescription
iconstringn/aNThe SystemIcon type for the image.
heightnumber0NThe height of the image.

icon options: IconType

Element Properties

NameTypeDefault ValueDescriptionLuminAndroidIOS
colorvec4n/aSets a color to modulate the image.๐Ÿ‘๐Ÿ‘๐Ÿ‘
textCoords[vec2]n/aSets the texture coordinates used by the image. The texture coordinates must be a list of four coordinates representing the UV coordinates of the four corners.๐Ÿ‘
opaquebooleann/aSets the opacity state of the image.๐Ÿ‘๐Ÿ‘
uibooleann/aSets whether the image is rendered on UI Layer.๐Ÿ‘
imageFrameResourceBigIntn/aSets the model resource used for the image frame. Note: Frame models are expected to be one meter high, one meter wide, and centered at the origin.๐Ÿ‘
renderResourceBigIntn/aSets the render resource used for the image.๐Ÿ‘