以下のワーニングが解決できずに困っています。
解決のためのアドバイスを頂けましたら幸いです。
react-dom.development.js:86 Warning: The tag <image> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
at image
at ProfilePicture
at App
開発環境
・Reactのバージョン:React18
・OS:Windows10
・エディタ:VSCode
・ブラウザ:Chrome(バージョン: 100.0.4896.127)
試したこと
imageタグを持つコンポーネント(ProfilePicture.jsx)のファイル名、関数を格納する変数(export const ProfilePicture)、import先のコンポーネント名の先頭文字が大文字になっているかの確認
imageタグがReactでは使えないのか?あるいは何か特殊な使い方があるのか?あるいはReact専用のimageタグのようなものがあるのか?をネットで調査
ソースコード
index.js
import React from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App";
const container = document.getElementById("root");
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);
App.jsx
import { Fragment } from "react";
import { ProfilePicture } from "./components/ProfilePicture";
export const App = () => {
return (
<Fragment>
<ProfilePicture></ProfilePicture>
</Fragment>
);
};
ProfilePicture.jsx
import Icon from "../images/MyProfilePic.jpg";
export const ProfilePicture = () => {
return <image src={Icon} alt="アイコン"></image>;
};
ファイル構成