解决cls问题

package.json

@@ -18,6 +18,7 @@
   "devDependencies": {
     "@faker-js/faker": "^7.6.0",
     "@types/imagesloaded": "^4.1.2",
+    "@types/node": "^18.11.18",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react-swc": "^3.0.0",

src/App.tsx

@@ -1,39 +1,14 @@
-import React, { useEffect, useRef } from "react";
-import { Masonry } from "masonic";
-import { useFakerImages } from "./utils/faker/index";
+// import Masonry from "@components/masonry";
+
+import Image from "@components/image";
+
 export default function App() {
-  const lists = useFakerImages(100);
+  // return <Masonry />;
+  const url = `https://images.pexels.com/photos/5702958/pexels-photo-5702958.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1`;
 
   return (
-    <div
-      style={{
-        display: "flex",
-        justifyContent: "center",
-      }}
-    >
-      <div className='feedContainer'>
-        <Masonry
-          items={lists}
-          columnWidth={180}
-          rowGutter={10}
-          columnGutter={10}
-          maxColumnCount={5}
-          render={FakerCard}
-        />
-      </div>
+    <div>
+      <Image url={url} />
     </div>
   );
 }
-
-function FakerCard({ data: { id, image, name } }) {
-  return (
-    <section key={id} className='element-item'>
-      <img src={image} alt='' />
-      <div className='footer'>
-        <p>
-          <span>{name}</span>
-        </p>
-      </div>
-    </section>
-  );
-}

src/components/image/index.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+import { getImageSize } from "./tool";
+export default function Image({ url }) {
+  const [loading, setLoading] = useState<boolean>(true);
+  const [obj, setObj] = useState({});
+  useEffect(() => {
+    getImageSize(url).then((data) => {
+      setLoading(() => false);
+      setObj(() => ({
+        width: data.width,
+        height: data.height,
+      }));
+    });
+  }, [url]);
+  if (loading) {
+    return <div>loading</div>;
+  }
+  return (
+    <div>
+      <img width={obj.width} height={obj.height} src={url} />
+    </div>
+  );
+}

src/components/image/tool.ts

@@ -0,0 +1,22 @@
+import { Once } from "@utils/index";
+import { resolve } from "path";
+/**
+ * image组件的工具库
+ */
+export function getImageSize(imageSrc: string) {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.src = imageSrc;
+    if (image.complete) {
+      resolve({
+        width: image.width,
+        height: image.height,
+      });
+    }
+    image.onload = () =>
+      resolve({
+        width: image.width,
+        height: image.height,
+      });
+  });
+}

src/components/masonry/index.tsx

@@ -0,0 +1,38 @@
+import { Masonry } from "masonic";
+import { useFakerImages } from "@utils/faker/index";
+export default function App() {
+  const lists = useFakerImages(100);
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "center",
+      }}
+    >
+      <div className='feedContainer'>
+        <Masonry
+          items={lists}
+          columnWidth={180}
+          rowGutter={10}
+          columnGutter={10}
+          maxColumnCount={5}
+          render={FakerCard}
+        />
+      </div>
+    </div>
+  );
+}
+
+function FakerCard({ data: { id, image, name } }) {
+  return (
+    <section key={id} className='element-item'>
+      <img src={image} alt='' loading='lazy' />
+      <div className='footer'>
+        <p>
+          <span>{name}</span>
+        </p>
+      </div>
+    </section>
+  );
+}

src/main.tsx

@@ -4,7 +4,7 @@ import App from "./App";
 import "./index.less";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  // <React.StrictMode>
+  <App />
+  // </React.StrictMode>
 );

src/utils/index.js

@@ -0,0 +1,9 @@
+export function Once(fn) {
+  let tag = fn;
+  return function () {
+    if (tag) {
+      tag.apply(this, arguments);
+      tag = null;
+    }
+  };
+}

tsconfig.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
+    "target": "ES5",
     "useDefineForClassFields": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
+    "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
@@ -14,8 +14,13 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@utils/*": ["src/utils/*"],
+      "@components/*": ["src/components/*"],
+      "@store/*": ["src/store/*"]
+    }
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": ["src"]
 }

vite.config.ts

@@ -1,7 +1,15 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
+import { defineConfig } from "vite";
+import path from "path";
+import react from "@vitejs/plugin-react-swc";
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  resolve: {
+    alias: {
+      "@utils": path.resolve(__dirname, "src/utils"),
+      "@components": path.resolve(__dirname, "src/components"),
+      "@store": path.resolve(__dirname, "src/store"),
+    },
+  },
   plugins: [react()],
-})
+});