跟新img组件

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference path="./.next/types/routes.d.ts" />
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

src/app/products/[id]/page.tsx

@@ -4,7 +4,8 @@ import {serverGet} from "@/utils/request";
 import './rich.css'
 import MainTitle from "@/components/MainTitle";
 import ContentNotFound from "@/components/ContentNotFound";
-import './head.css'; // 引入样式文件
+import './head.css';
+import Image from "next/image"; // 引入样式文件
 export const dynamicParams = true
 const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL as string
 export const generateStaticParams = async () => {
@@ -62,10 +63,17 @@ async function Page({
             <div className='container'>
                 {/* 左侧图片区域 */}
                 <div className='leftSection'>
-                    <img
-                        src={res.data.productUrl ? BASE_URL + res.data.productUrl : "/assets/home/20.png"} // 替换为实际设备图片链接
-                        alt="雷达水位监测仪EN200-D"
-                        className='deviceImg'
+                    {/*<img*/}
+                    {/*    src={res.data.productUrl ? BASE_URL + res.data.productUrl : "/assets/home/20.png"} // 替换为实际设备图片链接*/}
+                    {/*    alt="雷达水位监测仪EN200-D"*/}
+                    {/*    className='deviceImg'*/}
+                    {/*/>*/}
+                    <Image
+                        className={"h-50 object-contain"}
+                        src={res.data.productUrl ? BASE_URL + res.data.productUrl : "/assets/home/20.png"}
+                        alt={res.data.productName}
+                        width={1000}
+                        height={1000}
                     />
                 </div>
 

tsconfig.json

@@ -15,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {