Reactでsvgファイルが表示されない。

Question

前提

npx create-react-app my-app --typescript

で作成したプロジェクトで下記のディレクトリ構造になっています。

src
├ components
│ └ test.tsx
└ img - test.svg

test.tsxでimgフォルダにあるtest.svgを使用したいので、test.tsxで

import test from "../img/test.svg";

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

上記のように記述しています。
また、svgファイルのimport文に対してエラーは表示されていないので、パスは通っているかと思います。

発生している問題

ブラウザで確認すると画像は表示されずalt属性の"test"文字列が表示されます。

実現したいこと

画像を表示したいです。

試したこと

test.svgファイルをpublicフォルダに入れてimportのパスを

../../public/test.svg

としたところ、下記エラーメッセージが表示されました。

Module not found: You attempted to import ../../public/test.svg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

srcフォルダ以下のファイルしか参照しないようです。

また、console.log(test)を記述しコンソールで確認したところ、

/static/media/test.ランダムな文字列.svg

が表示されていました。

Comments

[quzq]

画像の読み込みエラーアイコン（画像が壊れたみたいなやつ）は表示されます？

[Sagami_yyy]

仰せのエラーアイコンは表示されています！

[quzq]

問題のimgタグを以下に変えてみて、表示されますでしょうか。
<img src={`${process.env.PUBLIC_URL}/logo192.png`} />
※create-react-app後、publicフォルダをいじっていないのが前提です。

[Sagami_yyy]

コピペしたらlogo192.pngが表示されました。

Answer 1

問題のsvgファイルをpublicフォルダに配置して、以下から参照してみてください。

<img src={`${process.env.PUBLIC_URL}/test.svg`} />

表示されなければ、ファイルが悪いんじゃないかと思います。

Comments

[Sagami_yyy]

ファイルが悪いのではないかというコメントをいただいたので検証しました。前提としてsvgファイルを直貼りしていたのですが、その際にsvgからxmlns="http://www.w3.org/2000/svg"を削除しておりまして、これが原因でインポートできなかったようです。ありがとうござました。