时间戳

首页 > 解决方案 > InvalidCharacterError：无法在“文档”上执行“createElement”：提供的标签名称（“/static/media/tab1.fab25bc3.png”）不是有效名称

javascript - InvalidCharacterError：无法在“文档”上执行“createElement”：提供的标签名称（“/static/media/tab1.fab25bc3.png”）不是有效名称

问题描述

大家好，我是新来的反应并试图通过 youtube 教程克隆 Netflix。所以这里的问题是我在功能组件中使用了一个图像，但它没有正确渲染

我得到的错误是：

InvalidCharacterError：无法在“文档”上执行“createElement”：提供的标签名称（“/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>
  );
}

标签： javascriptcssreactjsimage

解决方案

您的标签和导入的 png 共享相同的名称

更改代码以使用小写标记

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

或将您的导入更改为不同的名称以避免混淆并使其更清晰并防止 IDE 中的自动完成或建议使您绊倒:)

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

然后这样做，这样更清楚什么是什么

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

推荐阅读