r
r
react-juce
Search…
Image
A React component for displaying different types of images, including network images, local image files, and image data URLs.
The example below demonstrates displaying a local image file, and a data url.

Example

1
import React, { Component } from "react";
2
import { View, Image } from "react-juce";
3
4
// Using a bundling tool like Webpack or Rollup, we can configure this import
5
// to read the image file from disk at the time of bundling, and embed the data
6
// URL in our javascript bundle which can be imported just like this.
7
import logoDataUri from "./logo.jpg";
8
9
function App(props) {
10
return (
11
<View {...styles.outer} onMouseDown={(e) => console.log("Mouse event!", e)}>
12
<Image {...styles.image} source="file:///Users/nick/Documents/logo.jpg" />
13
<Image {...styles.image} source={logoDataUri} />
14
</View>
15
);
16
}
17
18
const styles = {
19
outer: {
20
width: "100%",
21
height: "100%",
22
backgroundColor: "ff17191f",
23
justifyContent: "center",
24
alignItems: "center",
25
},
26
image: {
27
width: "25%",
28
height: "25%",
29
padding: 20,
30
},
31
};
Copied!

Props

Image inherits support for all of the core View properties described in View.

source

The image source (either a remote URL (#14), a local file resource, or a data uri).
Type
Required
Supported
string
No
Partial: Standard

Styles

Image supports all of the default style properties described in Style Properties.
Last modified 7mo ago
Copy link