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.
import React, { Component } from "react";
import { View, Image } from "react-juce";
// Using a bundling tool like Webpack or Rollup, we can configure this import
// to read the image file from disk at the time of bundling, and embed the data
// URL in our javascript bundle which can be imported just like this.
import logoDataUri from "./logo.jpg";
function App(props) {
return (
<View {...styles.outer} onMouseDown={(e) => console.log("Mouse event!", e)}>
<Image {...styles.image} source="file:///Users/nick/Documents/logo.jpg" />
<Image {...styles.image} source={logoDataUri} />
</View>
);
}
const styles = {
outer: {
width: "100%",
height: "100%",
backgroundColor: "ff17191f",
justifyContent: "center",
alignItems: "center",
},
image: {
width: "25%",
height: "25%",
padding: 20,
},
};
Type | Required | Supported |
string | No |
Last modified 2yr ago