Using import for image

src/AddressTransactions.tsx

@@ -32,6 +32,7 @@ import { SelectionContext, useSelection } from "./useSelection";
 import { useMultipleETHUSDOracle } from "./usePriceOracle";
 import { useAppConfigContext } from "./useAppConfig";
 import { useSourcify } from "./useSourcify";
+import SourcifyLogo from "./sourcify.svg";
 
 type BlockParams = {
   addressOrName: string;
@@ -240,7 +241,7 @@ const AddressTransactions: React.FC = () => {
                     ) : (
                       <span className="self-center text-green-500">
                         <img
-                          src="/sourcify.svg"
+                          src={SourcifyLogo}
                           alt="Sourcify logo"
                           title="Verified by Sourcify"
                           width={16}

src/Logo.tsx

@@ -1,10 +1,11 @@
 import React from "react";
+import Otter from "./otter.jpg";
 
 const Logo: React.FC = () => (
   <div className="mx-auto mb-16 text-6xl text-link-blue font-title font-bold cursor-default flex items-center space-x-4">
     <img
       className="rounded-full"
-      src="/otter.jpg"
+      src={Otter}
       width={96}
       height={96}
       alt="An otter scanning"

src/Title.tsx

@@ -6,6 +6,7 @@ import useKeyboardShortcut from "use-keyboard-shortcut";
 import PriceBox from "./PriceBox";
 import SourcifyMenu from "./SourcifyMenu";
 import { RuntimeContext } from "./useRuntime";
+import Otter from "./otter.jpg";
 
 const CameraScanner = React.lazy(() => import("./search/CameraScanner"));
 
@@ -44,7 +45,7 @@ const Title: React.FC = () => {
           <div className="text-2xl text-link-blue font-title font-bold flex items-center space-x-2">
             <img
               className="rounded-full"
-              src="/otter.jpg"
+              src={Otter}
               width={32}
               height={32}
               alt="An otter scanning"