如何解决如何在 ReactJS 中的 img 元素上实现无边框的微光效果
我没有通过互联网加载图片。
我要加载的图像来自我的本地文件夹。
我已经将图像加载到我的 react 组件中的 img 元素中。
我想要的是在加载 React 组件时在作为我们徽标的图像上设置动画的微光效果。
我安装了这个库 react-shimmer-effect
但不幸的是,这个库在图像周围添加了一个边框,这是我不想要的。只需为图像周围的微光设置动画,而无需在其上绘制边框。
这是我所做的:
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import Image from 'next/image';
import Shimmer from "react-shimmer-effect";
export default function Index() {
return (
<div className={styles.container}>
<Head>
<title>Sample App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main style={{
height: '100vh',display: 'flex',flexDirection: 'column',alignItems: 'center',justifyContent: 'center'
}}>
<Shimmer>
<Image src={"/images/splash_icon.png"} width={300} height={75} alt="Loader" />
</Shimmer>
</main>
</div>
);
}
我可以通过哪些其他方式使其工作?
谢谢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。