Use a proper React file import for the OpenCost logo

Fixes https://github.com/backstage/backstage/issues/20333

Signed-off-by: Matt Ray <github@mattray.dev>

.changeset/young-toes-knock.md

@@ -0,0 +1,7 @@
+---
+'@backstage/plugin-opencost': minor
+---
+
+Fix for broken image reference.
+
+Fixed https://github.com/backstage/backstage/issues/20333

plugins/opencost/README.md

@@ -28,7 +28,7 @@ and
     </FlatRoutes>
     ```
 
-3.  Add link to OpenCost to your sidebar
+3.  Import the `MoneyIcon` and add link to OpenCost to your sidebar
 
     ```typescript
     // packages/app/src/components/Root/Root.tsx
@@ -58,7 +58,7 @@ If you haven't set up an ingress rule, you can port-forward the API with
 kubectl -n opencost port-forward deployment/opencost 9003
 ```
 
-Add the following to your `app-config.yaml`:
+Add the following to your `app-config.local.yaml`:
 
 ```yaml
 opencost:

plugins/opencost/src/components/OpenCostPage/OpenCostPage.tsx

@@ -17,6 +17,7 @@ import React from 'react';
 import { Grid } from '@material-ui/core';
 import { Header, Page, Content } from '@backstage/core-components';
 import { OpenCostReport } from '../OpenCostReport';
+import logo from '../../images/pig.png';
 
 export const OpenCostPage = () => (
   <Page themeId="tool">
@@ -25,12 +26,7 @@ export const OpenCostPage = () => (
       subtitle="Open source Kubernetes cloud cost monitoring"
     >
       <a href="https://opencost.io">
-        <img
-          width={68}
-          height={64}
-          src={require('../../images/pig.png')}
-          alt="OpenCost"
-        />
+        <img width={68} height={64} src={logo} alt="OpenCost" />
       </a>
     </Header>
     <Content>