微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在 ReactJS 中的 img 元素上实现无边框的微光效果

如何解决如何在 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>
  );
}

微光效果有效,但它会在图像周围创建一个边框,如下所示

enter image description here

我可以通过哪些其他方式使其工作?

谢谢。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。