如何在 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 (将#修改为@）

reactjs reactjs