InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/tab1.fab25bc3.png') is not a valid name

SMAmmar14 :

Hello Guys I am new to react and trying to clone Netflix through a youtube tutorial. So the issue here is that I am using an Image in a functional component, but it is not rendering properly

The error I am getting is this:

InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/tab1.fab25bc3.png') is not a valid name.

This is my Functional Component code:

import React, { Component } from "react";
import Img from "../images/tab1.png";

export default function TabContentOne() {
  return (
    <div className="container">
      <div className="tab-content">
        <span>
          If you decide Gamolytcs isn't for you - no problem. No commitment.
          Cancel online anytime.
          <br />
          <button>Try it now</button>
          <Img src={Img} alt="" />
        </span>
      </div>
    </div>
  );
} 

Code Uniquely :

Your tag and imported png share the same name

alter the code to use a lowercase tag

<img src={Img} alt="" />

or change your import to be a different name to avoid the confusion and make it a little clearer and prevent autocompletes or suggestions in the IDE from tripping you up :)

import TabImg from "../images/tab1.png";

and then do this so its clearer what is what

 <img src={TabImg} alt="" />