fix ProfileImageSettings when uploaded image is null

packages/app/src/client/services/PersonalContainer.js

@@ -8,8 +8,6 @@ import { apiv3Get, apiv3Put } from '../util/apiv3-client';
 // eslint-disable-next-line no-unused-vars
 const logger = loggerFactory('growi:services:PersonalContainer');
 
-const DEFAULT_IMAGE = '/images/icons/user.svg';
-
 /**
  * Service container for personal settings page (PersonalSettings.jsx)
  * @extends {Container} unstated Container

packages/app/src/components/Me/ProfileImageSettings.tsx

@@ -14,6 +14,9 @@ import { withUnstatedContainers } from '../UnstatedUtils';
 
 import ImageCropModal from './ImageCropModal';
 
+const DEFAULT_IMAGE = '/images/icons/user.svg';
+
+
 type Props = {
   appContainer: AppContainer,
 }
@@ -147,7 +150,7 @@ const ProfileImageSettings = (props: Props): JSX.Element => {
               { t('Current Image') }
             </label>
             <div className="col-sm-8 col-12">
-              {uploadedPictureSrc && (<p><img src={uploadedPictureSrc} className="picture picture-lg rounded-circle" id="settingUserPicture" /></p>)}
+              <p><img src={uploadedPictureSrc ?? DEFAULT_IMAGE} className="picture picture-lg rounded-circle" id="settingUserPicture" /></p>
               {uploadedPictureSrc && <button type="button" className="btn btn-danger" onClick={deleteImageHandler}>{ t('Delete Image') }</button>}
             </div>
           </div>