在Next.js路线内未渲染材质ui的图像

// 正确的图像路径
<img src="/images/example.jpg" alt="Example" />

import { useEffect, useState } from 'react';

function MyComponent() {
  const [imageLoaded, setImageLoaded] = useState(false);

  useEffect(() => {
    // 模拟异步加载图像
    const timer = setTimeout(() => {
      setImageLoaded(true);
    }, 1000);

    return () => clearTimeout(timer);
  }, []);

  return (
    <div>
      {imageLoaded && <img src="/images/example.jpg" alt="Example" />}
    </div>
  );
}

/* 确保没有这样的样式 */
img {
  display: none;
  width: 0;
  height: 0;
}

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 客户端特定的代码
  }, []);

  return <img src="/images/example.jpg" alt="Example" />;
}