Image

This is a pass through component from React-Bootstrap.

See React-Bootstrap for documentation.

Basic Styles

<>
  <Image
    className="mr-2"
    src="https://picsum.photos/100/100/"
    rounded
    alt="Image description"
  />
  <Image
    className="mr-2"
    src="https://picsum.photos/100/100/"
    roundedCircle
    alt="Image description"
  />
  <Image
    className="mr-2"
    src="https://picsum.photos/100/100/"
    thumbnail
    alt="Image description"
  />
</>

Fluid Sizing

<Image src="https://picsum.photos/1600/800/" fluid alt="Image description" />

Dependencies

Repository	Usage Count
frontend-app-staff-dashboard	15
frontend-app-dashboard	8
frontend-app-course-authoring	4
frontend-app-authn	2
frontend-app-account	2
frontend-app-learning	2
frontend-app-profile	2

Detailed usage locations:

frontend-app-staff-dashboard

• src/components/CourseCard.jsx
• src/components/CourseExploreCard.jsx
• src/components/NoDataImage.jsx
• src/components/ProfileDrawer.jsx
• src/components/ProgramCard.jsx
• src/components/VideoCard.jsx
• src/pages/organizations/index.jsx
• src/pages/platform-settings/customization/appearance/index.jsx
• src/pages/platform-settings/integrations/IntegrationCard.jsx
• src/pages/program-single/ProgramSingle.jsx
• src/pages/program-single/courses/AddCoursesDrawer.jsx
• src/pages/program-single/enrollment/EnrollDrawer.jsx
• src/pages/program-single/enrollment/index.jsx
• src/pages/program-single/program-team/AddUserDrawer.jsx
• src/pages/utilities/notifications/NotificationsDrawer.jsx

frontend-app-dashboard

• src/components/CartDrawer.jsx
• src/components/CourseDropdownCard.jsx
• src/components/CourseExploreCard.jsx
• src/components/ProgramCard.jsx
• src/components/RecentActivityCard.jsx
• src/pages/home/updates/RecentActivity.jsx
• src/pages/home/updates/UpcomingEvents.jsx
• src/pages/organizations/index.jsx

frontend-app-course-authoring

• src/course-overview/index.jsx
• src/enrollments/EnrollDrawer.jsx
• src/enrollments/index.jsx
• src/studio-home/card-item/index.jsx

frontend-app-authn

• src/logistration/Logistration.jsx
• src/sandbox-login/index.jsx

frontend-app-account

• src/components/CartDrawer.jsx
• src/components/ProfileCardLarge.jsx

frontend-app-learning

• src/course-home/outline-tab/OutlineTab.jsx
• src/course-home/outline-tab/widgets/StartOrResumeCourseCard.jsx

frontend-app-profile

• src/components/CartDrawer.jsx
• src/components/ProfileCardLarge.jsx