Merge pull request #20377 from mattray/opencost-20333

Use a proper React file import for the OpenCost logo

.changeset/young-toes-knock.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-opencost': patch
+---
+
+Fix for broken image reference.

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

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>