InvalidCharacterError: Не удалось выполнить «createElement» для «Документа»: предоставленное имя тега («/static/media/tab1.fab25bc3.png») не является допустимым именем

Question

Привет, ребята. Я новичок в реакции и пытаюсь клонировать Netflix с помощью учебника YouTube. Таким образом, проблема заключается в том, что я использую изображение в функциональном компоненте, но оно не отображается должным образом

Я получаю следующую ошибку:

InvalidCharacterError: Не удалось выполнить 'createElement' в 'Document': предоставленное имя тега ('/static/media/tab1.fab25bc3.png') не является допустимым именем.

Это мой код функционального компонента:

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>
  );
} 

Answer 1

Ваш тег и импортированный png имеют одно и то же имя

, измените код, чтобы использовать строчный тег

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

, или измените свой импорт на другое имя, чтобы избежать путаницы и сделать это немного понятнее и не дает автозаполнениям или предложениям в IDE приводить вас в замешательство :)

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

, а затем делать это так, чтобы было понятнее, что к чему

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