私はReactコンポーネントの1つに画像ファイルをインポートしようとしています。プロジェクトはWebパックでセットアップされています
コンポーネントのコードは次のとおりです
import Diamond from '../../assets/linux_logo.jpg';
export class ItemCols extends Component {
render(){
return (
<div>
<section className="one-fourth" id="html">
<img src={Diamond} />
</section>
</div>
)
}
}
これが私のプロジェクト構造です。
私はwebpack.config.jsファイルを次のように設定しました
{
test: /\.(jpg|png|svg)$/,
loader: 'url-loader',
options: {
limit: 25000,
},
},
{
test: /\.(jpg|png|svg)$/,
loader: 'file-loader',
options: {
name: '[path][name].[hash].[ext]',
},
},
PS. 他のリモート ソースから画像を取得できますが、ローカルに保存された画像は取得できません。JavaScript コンソールでもエラーは表示されません。何か助けになるものがあれば教えてください。React を使い始めたばかりで、何が間違っているのかわかりません。
ベストアンサー1
使ってみる
import mainLogo from'./logoWhite.png';
//then in the render function of Jsx insert the mainLogo variable
class NavBar extends Component {
render() {
return (
<nav className="nav" style={nbStyle}>
<div className="container">
//right below here
<img src={mainLogo} style={nbStyle.logo} alt="fireSpot"/>
</div>
</nav>
);
}
}