Comment on page

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
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,
  },
};
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.

Components - Previous

View

Next - Components

Text

Last modified 2yr ago