refactor: replace image component (#51928)

client/src/client-only-routes/show-certification.tsx

@@ -1,4 +1,4 @@
-import { Image, Button } from '@freecodecamp/react-bootstrap';
+import { Button } from '@freecodecamp/react-bootstrap';
 import { isEmpty } from 'lodash-es';
 import { QRCodeSVG } from 'qrcode.react';
 import React, { useEffect, useState } from 'react';
@@ -6,7 +6,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col, Row } from '@freecodecamp/ui';
+import { Container, Col, Row, Image } from '@freecodecamp/ui';
 
 import envData from '../../config/env.json';
 import { getLangCode } from '../../../shared/config/i18n';
@@ -467,7 +467,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
             {!isMicrosoftCert && (
               <>
                 <span className='ribbon-wrap'>
-                  <Image className='ribbon' src={ribbon} />
+                  <Image alt='' className='ribbon' src={ribbon} />
                 </span>
                 <span className='qr-wrap'>
                   <QRCodeSVG className='qr-code' value={certURL} />

client/src/components/helpers/avatar-renderer.tsx

@@ -1,4 +1,4 @@
-import { Image } from '@freecodecamp/react-bootstrap';
+import { Image } from '@freecodecamp/ui';
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import isURL from 'validator/lib/isURL';
@@ -50,7 +50,6 @@ function AvatarRenderer({
         <Image
           alt={t('profile.avatar', { username: userName })}
           className='avatar'
-          responsive={true}
           src={picture}
         />
       )}