1

我正在关注ReactJS 的本指南，并在使用指南指定的 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.

我如何能够将源链接到反应图标？以及为什么源不起作用。

这是我的代码：

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
4

1 回答 1

1

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

<DiGoogleDrive />

代替原来的 HTML img 标签。

{/* <Img src={DiGoogleDrive} alt="Google keep logo" /> */}
于 2021-03-01T18:40:16.913 回答