javascript - InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag nam

admin管理员组

文章数量:1389761

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 ponent, 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 mitment.
          Cancel online anytime.
          <br />
          <button>Try it now</button>
          <Img src={Img} alt="" />
        </span>
      </div>
    </div>
  );
} 

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 ponent, 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 mitment.
          Cancel online anytime.
          <br />
          <button>Try it now</button>
          <Img src={Img} alt="" />
        </span>
      </div>
    </div>
  );
} 

• javascript
• css
• reactjs
• image

Share Improve this question Follow asked Mar 7, 2020 at 6:21 SMAmmar14SMAmmar14 2911 silver badge77 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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 autopletes 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="" />

本文标签：