如何解决在 React 中延迟加载图像
我有一个 Image
组件,它接收图像的名称,并使用一些逻辑来确定资产文件夹所在的位置。
我的图像组件看起来像这样:
export default function Image({
basename,fallbackBasename,onError,...props
}) {
const imageAssetsBaseUrl =
path.extname(basename) === 'svg'
? '../../../assets/icons'
: '../../../assets/images';
const [hasError,setHasError] = useState(false);
const handleError = (...args) => {
setHasError(true);
onError(...args);
};
const imageSource = React.lazy(() =>
import(
hasError
? `${imageAssetsBaseUrl}${fallbackBasename}`
: `${imageAssetsBaseUrl}${basename}`
),);
return (
<React.Suspense fallback={<div>loading...</div>}>
<img src={imageSource} onError={handleError} {...props} />
</React.Suspense>
);
}
我期望的是在延迟加载图像时渲染 <div>loading...</div>
,并且在加载后正确渲染图像。
实际发生的是在资产的加载阶段没有渲染任何东西,并且每当加载最终发生时,我都会收到一个错误图像,因为 img
的来源是:[object Object]
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。