图像标签 src 中使用的 React-icon 带来错误

问题描述

我正在遵循 ReactJS 的 this 指南，但在使用指南指定的 Img 标签时遇到了上述错误。

<Img src={keeplogo} alt="Google keep logo" />

导致此错误：

Warning: Invalid value for prop `src` on <img> tag. Either remove it from the element,or pass a string or number value to keep it in the DOM.

如何将源链接到 react-icons？以及为什么源不起作用。

这是我的代码：

import React from 'react'
import styled from 'styled-components';

import { DiFirebase,DiGoogleDrive,DiReact } from 'react-icons/di';

const Nav = styled.nav`
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 25px;
    border-bottom: 1px solid rgba(60,64,67,0.2);
`;

const ImgWrap = styled.div`
    display: flex;
    align-items: center;
`;

const Img = styled.img`
    width: 40px;
    height: 40px;
`


const Header = () => {
    return (
        <Nav>
            <h1>Keep clone</h1>
            <ImgWrap>
                <Img src={DiGoogleDrive} alt="Google keep logo" />
                <p>+</p>
                <Img src={DiReact} alt="React logo"/>
                <p>+</p>
                <Img src={DiFirebase} alt="firebase logo"/>
            </ImgWrap>
        </Nav>
    )
}

export default Header

解决方法

事实证明，您必须将 react-icons 集成为 react 组件，并且它们不是本地托管的 png/graphic 文件类型？如果我错了，请纠正我。但这修复了它：

<DiGoogleDrive />

代替原来的 HTML img 标签。

{/* <Img src={DiGoogleDrive} alt="Google keep logo" /> */}