1

I am following this guide for ReactJS and ran into the aforementioned error while using an Img tag as designated by the guide.

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

Leads to this error:

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.

How am I able to link the source to react-icons? And why does the source not work.

Here is my code:

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
Greg Iven
  • 171
  • 2
  • 10

2 Answers2

1

It turns out you have to integrate the react-icons as react components and as they are not png/graphic file types hosted locally? Correct me if I am wrong. But this fixed it:

<DiGoogleDrive />

in lieu of the original HTML img tag.

{/* <Img src={DiGoogleDrive} alt="Google keep logo" /> */}
Greg Iven
  • 171
  • 2
  • 10
0

You can't add a component to the src attribute. instead of an img tag, you can use the "span" tag like this,

   <span><DiGoogleDrive /></span>
Smiley Ismail
  • 1
  • 2