I have installed React using create-react-app
. It installed fine, but I am trying to load an image in one of my components (Header.js
, file path: src/components/common/Header.js
) but it's not loading. Here is my code:
import React from 'react';
export default () => {
var logo1 = (
<img
//src="https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-goose.jpg"
src={'/src/images/logo.png'}
alt="Canvas Logo"
/>
);
return (
<div id="header-wrap">
<div className="container clearfix">
<div id="primary-menu-trigger">
<i className="icon-reorder"></i>
</div>
<div id="logo">
<a href="/" className="standard-logo" data-dark-logo='/images/logo-dark.png'>{logo1}</a>
<a href="/" className="retina-logo" data-dark-logo='/images/[email protected]'>
<img src='/var/www/html/react-demo/src/images/[email protected]' alt="Canvas Logo" />
</a>
</div>
</div>
</div>
);
}
If I write the image path as src={require('./src/images/logo.png')}
in my logo1
variable, it gives the error:
Failed to compile.
Error in ./src/Components/common/Header.js
Module not found: ./src/images/logo.png in /var/www/html/wistful/src/Components/common
Please help me solve this. Let me know what I am doing wrong here.
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…