How to Render Images in sitecore jss Component?

Question

I am new to sitecore JSS as I followed the Official sitecore documents and created an app and then Scaffold one component to this app and also rendered Few single line and rich text Fields but i am not getting any idea how to render the images?

Answer 1

The sample apps contain a Styleguide page that has example components of how to render different field types and the options thereof, including images. For example, in React this is the sample component.

import React from 'react';
import { Image } from '@sitecore-jss/sitecore-jss-react';

/**
 * Demonstrates usage of an Image content field within JSS.
 * Image field data is uploaded into the Sitecore Media Library.
 */
const StyleguideFieldUsageImage = (props) => (
  <Image media={props.fields.sample1} />
);

export default StyleguideFieldUsageImage;