fix: image updates

src/containers/EmptyCourse/__snapshots__/index.test.jsx.snap

@@ -7,9 +7,9 @@ exports[`EmptyCourse snapshot 1`] = `
   <div
     className="empty-course-hero"
   >
-    <img
+    <Image
       alt="empty course banner"
-      src="empty-course.svg"
+      src="icon/mock/path"
     />
     <h1>
       <FormattedMessage

src/containers/EmptyCourse/index.jsx

@@ -1,6 +1,11 @@
 import React from 'react';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import {
+  Button,
+  Image,
+} from '@edx/paragon';
+
+import emptyCourseSVG from 'assets/empty-course.svg';
 
 import SuggestedCourses from './SuggestedCourses';
 import messages from './messages';
@@ -9,7 +14,7 @@ import './index.scss';
 export const EmptyCourse = () => (
   <div className="p-3">
     <div className="empty-course-hero">
-      <img src="empty-course.svg" alt="empty course banner" />
+      <Image src={emptyCourseSVG} alt="empty course banner" />
       <h1>
         <FormattedMessage {...messages.lookingForChallengePrompt} />
       </h1>