[#343] replace img with next/image

yceffort · Jun 19, 2021 · 6596e93 · 6596e93
1 parent 8697885
commit 6596e93
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 49 deletions.
diff --git a/next.config.js b/next.config.js
@@ -41,20 +41,4 @@ module.exports = withPWA({
       },
     ]
   },
-  webpack: (config) => {
-    config.module.rules.push({
-      test: /\.(png|jpe?g|gif|mp4)$/i,
-      use: [
-        {
-          loader: 'file-loader',
-          options: {
-            publicPath: '/_next',
-            name: 'static/media/[name].[hash].[ext]',
-          },
-        },
-      ],
-    })
-
-    return config
-  },
 })
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
     "glob": "^7.1.6",
     "image-size": "^0.9.7",
     "memoizee": "^0.4.14",
-    "next": "^11.0.0",
+    "next": "^11.0.1-canary.5",
     "next-mdx-remote": "^3.0.2",
     "next-pwa": "^5.2.21",
     "next-seo": "^4.23.0",

diff --git a/pages/about.tsx b/pages/about.tsx
@@ -4,6 +4,7 @@ import SiteConfig from '#src/config'
 import { PageSeo } from '#components/SEO'
 import SocialIcon from '#components/icons'
 import CustomLink from '#components/Link'
+import profile from '#public/profile.png'
 
 export default function About() {
   return (
@@ -21,9 +22,12 @@ export default function About() {
         </div>
         <div className="items-start space-y-2 xl:grid xl:grid-cols-3 xl:gap-x-8 xl:space-y-0">
           <div className="flex flex-col items-center pt-8 space-x-2">
-            <img
-              src={SiteConfig.author.photo}
+            <Image
+              placeholder="blur"
+              src={profile}
               alt="avatar"
+              width="192px"
+              height="192px"
               className="w-48 h-48 rounded-full"
             />
             <h3 className="pt-4 pb-2 text-2xl font-bold leading-8 tracking-tight">

diff --git a/src/components/LayoutWrapper.tsx b/src/components/LayoutWrapper.tsx
@@ -7,6 +7,7 @@ import Footer from './Footer'
 import MobileNav from './MobileNav'
 import ThemeSwitch from './ThemeSwitch'
 
+import profile from '#public/profile.png'
 import SiteConfig from '#src/config'
 
 const LayoutWrapper = ({ children }: { children: ReactNode }) => {
@@ -19,10 +20,11 @@ const LayoutWrapper = ({ children }: { children: ReactNode }) => {
               <div className="flex items-center justify-between">
                 <div className="mr-3">
                   <Image
-                    src={SiteConfig.author.photo}
+                    src={profile}
                     alt="avatar"
                     width={40}
                     height={40}
+                    placeholder="blur"
                     className="w-10 h-10 rounded-full"
                   />
                 </div>

diff --git a/src/components/layouts/Post.tsx b/src/components/layouts/Post.tsx
@@ -11,6 +11,7 @@ import PageTitle from '#components/PageTitle'
 import SiteConfig from '#src/config'
 import { getThumbnailURL } from '#utils/common'
 import MathLoader from '#components/layouts/Post/math'
+import profile from '#public/profile.png'
 
 export default function PostLayout({
   children,
@@ -68,11 +69,14 @@ export default function PostLayout({
               <dd>
                 <ul className="flex justify-center space-x-8 xl:block sm:space-x-12 xl:space-x-0 xl:space-y-8">
                   <li className="flex items-center space-x-2">
-                    {/* <img
-                      src={siteMetdata.image}
+                    <Image
+                      src={profile}
+                      placeholder="blur"
                       alt="avatar"
+                      width={40}
+                      height={40}
                       className="w-10 h-10 rounded-full"
-                    /> */}
+                    />
                     <dl className="text-sm font-medium leading-5 whitespace-nowrap">
                       <dt className="sr-only">Name</dt>
                       <dd className="text-gray-900 dark:text-gray-100">

diff --git a/src/components/screenshot/index.tsx b/src/components/screenshot/index.tsx
@@ -1,6 +1,7 @@
 import styles from './index.module.css'
 
 import SiteConfig from '#src/config'
+
 export default function Screenshot({
   title,
   tags,