-
requireを使用する方法: Reactでパブリックフォルダ内のSVGを取得する一般的な方法は、
require
を使用することです。以下のコードを参考にしてください。import React from 'react'; const MyComponent = () => { const svgPath = require('../public/my-svg.svg').default; return ( <div> <img src={svgPath} alt="My SVG" /> </div> ); }; export default MyComponent;
上記の例では、
require
を使用してSVGファイルのパスを取得し、img
要素のsrc
属性に指定して表示しています。require
のパスは、プロジェクトのルートディレクトリからの相対パスで指定します。 -
public
フォルダへの直接リンク: もう一つの方法は、パブリックフォルダ内のSVGファイルに直接リンクすることです。以下のコードを参考にしてください。import React from 'react'; const MyComponent = () => { return ( <div> <img src="/my-svg.svg" alt="My SVG" /> </div> ); }; export default MyComponent;
上記の例では、
img
要素のsrc
属性にSVGファイルのパスを直接指定しています。この方法では、public
フォルダ内のファイルにアクセスできます。
どちらの方法を選んでも、Reactアプリ内でパブリックフォルダのSVGファイルにアクセスできます。適切な方法を選択し、プロジェクトの要件に応じて利用してください。